我怎样才能让我的轮播在 Angular 8 中工作答案

【问题标题】：How can i make my carousel work in Angular 8我怎样才能让我的轮播在 Angular 8 中工作
【发布时间】：2020-05-22 00:30:19
【问题描述】：

我有一个从bootstrap 4 的文档中复制的轮播，但它只显示一个图像。我怎样才能让我的轮播显示所有图像？。我是使用 Angular 的新手

这是我的代码：

<div class=" bg-success text-white py-5 text-center">
    <h1 >header</h1>
</div>
  <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
    </ol>
    <div>
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img class="d-block w-100" src="./assets/images/leadlogic_1.jpg" alt="First slide">
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="./assets/images/leadlogic_2.jpg" alt="Second slide">
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="./assets/images/leadlogic_3.jpg" alt="Third slide">
      </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>

【问题讨论】：

如果你用的是纯html，你缺的就是jquery，https://jsfiddle.net/Lmbocf9n/，如果你用的是angular，最好按照这个https://ng-bootstrap.github.io/#/components/carousel/examples
我看过网站但不知道如何正确使用它，我是新使用 angular
如果您指的是 ng bootstrap，请先按照此处的说明进行操作，https://www.npmjs.com/package/@ng-bootstrap/ng-bootstrap 然后尝试关注https://stackblitz.com/run?file=app/carousel-basic.ts
你可以使用我的回答来寻求帮助stackoverflow.com/questions/54407072/…
它适用于@SupunDeSilva 答案

标签： javascript angular typescript bootstrap-4

【解决方案1】：

使用 ngx-bootstrap 轮播组件： https://valor-software.com/ngx-bootstrap/#/carousel

【讨论】：

【解决方案2】：

您需要按照以下步骤在 Angular 项目中使用引导轮播

在下面安装依赖项

npm i bootstrap
npm i jquery
npm i popper.js@1.14.3

然后在你的 angular.json 文件中添加 css 和 js 文件。

在 styles 部分添加 bootstrap.min.css

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

在 scripts 部分添加 jquery、bootstrap 和 popper js 文件

"scripts": [
  "./node_modules/jquery/dist/jquery.min.js",
  "./node_modules/bootstrap/dist/js/bootstrap.min.js"   ,
  "./node_modules/popper.js/dist/umd/popper.min.js"
]

现在您可以在模板文件中添加引导轮播。您还需要将 data-slide-to="0" 更改为 [attr.data-slide-to]="0"

【讨论】：

【解决方案3】：

它可以做下一个链接https://uxworks.online/how-to-add-dynamic-carousel-in-angular-in-simple-steps/的事情

【讨论】：

【解决方案4】：

您可以使用ngb-carousel 来获取较少的代码

使用此命令安装 ngx-bootstrap

npm install --save @ng-bootstrap/ng-bootstrap

在您的 module.ts 文件中导入 ng-bootstrap

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

并添加html代码

    <ngb-carousel *ngIf="cars">
          <div *ngFor="let item of cars">
              <ng-template  ngbSlide>
                  <div class="picsum-img-wrapper">
                      <img [src]="item"  alt="Random first slide" class="mh-100" style="width: 100%; height: 35vh">
                  </div>
              </ng-template>
          </div>
    </ngb-carousel>

你可以在这里查看我的 stackblitz https://stackblitz.com/edit/angular-ngbcarouseldemo

【讨论】：