使用 ngx-bootstrap 的 Angular Carousel

Question

我遵循了使用 angular-cli的入门指南，并且使用 Alert 模块进行了完整的演示。 然后，我尝试按此处所述添加轮播。

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

箭头有效，但标题超出图像，图像右侧有一块白色。

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

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

Answer 1

在 bootstrap 4.3.1 中， img-responsive类被img-fluid替换，而center-block被mx-auto替换，但最后一个应该在<slide>标签内使用，因为宽度属性没有设置在<img>了。

因此，对于使用 bootstrap 4.3.1 的 ngx-bootstrap 5.1.2，代码应该是这样的（用 Angular 7 测试）：

<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>

上面的代码要求你的 component.ts 文件包含以下代码：

public itemsPerSlide = 3;
public singleSlideOffset = false;
public noWrap = false;
public cycleInterval = 3000;
public slides = [
  {image: '//placehold.it/1200x600/444'},
  {image: '//placehold.it/1200x600/ccff00'},
  {image: '//placehold.it/1200x600/ddd'},
  {image: '//placehold.it/1200x600/ccff00'},
  {image: '//placehold.it/1200x600/444'},
  {image: '//placehold.it/1200x600/ddd'}
];

Answer 2

将此添加到您的图像（ img标签）：

 class="img-responsive center-block"

...然而，在加载它们之前将所有图像的大小相同以使其看起来不错是有帮助的。

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

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",
  ],