![](/img/trans.png)
[英]How can i make the Javascript work for a Carousel by using bootstrap 4?
[英]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.