使用 ngx-bootstrap 的 Angular Carousel答案

【问题标题】：Angular Carousel using ngx-bootstrap使用 ngx-bootstrap 的 Angular Carousel
【发布时间】：2017-05-03 12:24:28
【问题描述】：

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

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

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

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

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

【问题讨论】：

标签： angular twitter-bootstrap carousel ngx-bootstrap

【解决方案1】：

在 bootstrap 4.3.1 中，img-responsive 类被 img-fluid 替换，center-block 被 mx-auto 替换，但最后一个应该在 <slide> 标记内使用，因为 width 属性不是不再设置<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'}
];

【讨论】：

根据最新版本，这是正确的，谢谢@João Canhoto

【解决方案2】：

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

 class="img-responsive center-block"

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

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案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",
  ],

【讨论】：