我怎樣才能讓我的輪播在 Angular 8 中工作

Question

我有一個從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>

Answer 1

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

Answer 2

您需要按照以下步驟在 Angular 項目中使用 bootstrap carousel

安裝以下依賴項

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

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

在樣式部分添加bootstrap.min.css

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

在腳本部分添加 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"

Answer 3

您可以將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

Answer 4

它可以做下一個鏈接https://uxworks.online/how-to-add-dynamic-carousel-in-angular-in-simple-steps/