Angx Carousel使用ngx-bootstrap

Question

我已经关注Getting started guide using angular-cli了，我使用了Alert模块进行了完整的演示。然后我尝试按照here所述添加轮播。

我在控制台中没有错误，但显示屏看起来有线并且Carousel无法正常工作。这是它的外观

箭头有效，但标题超出了图像范围，图像右侧是一块白色..

我已经复制粘贴了组件代码以及html，我尝试了上面链接中的前两个示例以确保。

有人可以帮我解决这个问题吗？

Answer 1

将此添加到您的图片（img标记）：

 class="img-responsive center-block"

...但是在加载它们之前让所有图像大小相同有助于使它看起来不错。

Bootstrap轮播不会自动调整图像大小。中心放大特定区域。如果您想要这种效果，最好使用另一个轮播组件（不是ngx-bootstrap一个）

Answer 2

在引导程序4.3.1中，img-responsive类被img-fluid取代，center-block被mx-auto取代，但是最后一个应该在{{1 }}标签，因为<slide>上不再设置width属性。

因此，对于使用Bootstrap 4.3.1的ngx-bootstrap 5.1.2，代码应如下所示（在Angular 7中进行了测试）：

<img>

上面的代码希望您的component.ts文件包含以下代码：

<carousel [itemsPerSlide]="itemsPerSlide"
          [singleSlideOffset]="singleSlideOffset"
          [noWrap]="noWrap"
          [interval]="cycleInterval"
          [startFromIndex]="0">
  <slide *ngFor="let slide of slides; let index=index" class="mx-auto">
    <img [src]="slide.image" class="img-fluid">
    <div class="carousel-caption">
      <h4>Slide {{index}}</h4>
    </div>
  </slide>
</carousel>

Answer 3

这是我解决这个问题的方法，（基于@Bogac的回答）

<div class="container">
  <div class="col-md-8 col-xs-12 col-md-offset-2 push-md-2">
    <carousel>
      <slide *ngFor="let slide of slides; let index=index">
        <img [src]="slide.image" class="img-responsive center-block">
        <div class="carousel-caption">
          <h4>Slide {{index}}</h4>
          <p>{{slide.text}}</p>
        </div>
      </slide>
    </carousel>
  </div>
</div>

Answer 4

请记住，您必须安装依赖项。

npm install ngx-bootstrap bootstrap@4.0.0-beta jquery popper.js --save

示例

HTML：

<div class="container">
        <div class="col-xs-12">
            <carousel>
                <slide>
                    <img src="../../../assets/img/img1.jpg" class="img-responsive center-block">
                    <div class="carousel-caption">
                        <h4>Test</h4>
                        <p>test</p>
                    </div>
                </slide>
                <slide>
                    <img src="../../../assets/img/img2.jpg" class="img-responsive center-block">
                    <div class="carousel-caption">
                        <h4>Test2</h4>
                        <p>test2</p>
                    </div>
                </slide>
            </carousel>
        </div>
    </div>

app.module.ts：

import { AlertModule } from '../../node_modules/ngx-bootstrap';
import { CarouselModule } from '../../node_modules/ngx-bootstrap/carousel';

imports: [...,
AlertModule.forRoot(),
CarouselModule.forRoot(),
.],

.angular-cli.json：

"styles": [
     "../node_modules/bootstrap/dist/css/bootstrap.min.css",
    "styles.css",
  ],