[英]Dynamic bootstrap 4 carousel with multiple images/cards in one slide in Angular 8
I am trying to design a dynamic carousel that has multiple cards/images in one row.我正在尝试设计一个动态轮播,在一行中有多个卡片/图像。 I have first tried achieving multiple cards in one row but next and previous buttons weren't working, so I searched online and found a solution for that now next and previous buttons are working fine, but I can see only one image in each slide.我首先尝试在一行中实现多张卡片,但下一个和上一个按钮不起作用,所以我在网上搜索并找到了一个解决方案,现在下一个和上一个按钮工作正常,但我只能在每张幻灯片中看到一个图像。 Below is my code,下面是我的代码,
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item" *ngFor="let data of dummyData;let i = index"
[ngClass]="{'active' : i == 0}">
<div class="row">
<div class="col">
<div class="main-card">
<span class="mt-4">
{{data.class}} <br>
{{data.when}}
</span>
</div>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
This is what I want to design这就是我想要设计的
Can anyone tell me where I am going wrong.谁能告诉我我哪里出错了。 Any help is much appreciated.任何帮助深表感谢。
Thank you!!谢谢!!
I was able to achieve this by creating nested array.我能够通过创建嵌套数组来实现这一点。
HTML HTML
<div class="carousel-item row w-100 mx-3 text-center {{ i == 0 ? 'active' : '' }} m-t-0" style="margin-right: 70px;" *ngFor='let fav of userFavourite; let i = index' >
<div class=" d-flex justify-content-around w-100" >
<div class="mainSlide " style="align-content: center;" *ngFor="let x of fav;" >
///Enter each image from loop..etc
</div>
</div>
</div>
TypeScript/Component.ts打字稿/Component.ts
//get the image/data from server
getUserFavourite() {
this._productService.getUserFavourite(this.loggedInUsername).subscribe(
(res) => {
if( this.scrWidth>1300){
this.favCount=4;
} else if(this.scrWidth<1300 && this.scrWidth>1025){
this.favCount='3';
} else if(this.scrWidth<1025 ){
this.favCount='2';
}
else if(this.scrWidth<600 ){
this.favCount='1';
}
this.userFavourite = this.chunks(res,this.favCount);
console.log(this.userFavourite);
},
(err) => {
this.error = err;
}
);
}
/**************************************************************** */
//gets the size of window screen to adjust number of images in an array to fit carousel
@HostListener('window:resize', ['$event'])
getScreenSize(event?) {
this.scrHeight = window.innerHeight;
this.scrWidth = window.innerWidth;
console.log(this.scrHeight, this.scrWidth);
}
/******************************************************************** */
//adds images from server to array
chunks(array, size) {
let results = [];
results = [];
while (array.length) {
results.push(array.splice(0, size));
}
return results;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.