繁体   English   中英

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

[英]How can i make my carousel work in Angular 8

我有一个从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>

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

您需要按照以下步骤在 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"

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

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM