Javascript Dynamic bootstrap 4旋转木马，在一个幻灯片中包含多个图像/卡，角度为8

我正在尝试设计一个动态旋转木马，在一行中有多张卡/图像。我第一次尝试在一行中获得多张卡片，但“下一个”和“上一个”按钮不起作用，所以我在网上搜索并找到了一个解决方案，现在“下一个”和“上一个”按钮工作正常，但我在每张幻灯片中只能看到一张图像。下面是我的代码

<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>

{{data.class}}

{{data.when}}

这就是我想要设计的

谁能告诉我哪里出了问题。非常感谢您的帮助

---

谢谢

我可以通过创建嵌套数组来实现这一点

从服务器获取数据

检查屏幕大小以决定在转盘上显示多少图像

将数组中的数据和图像数发送到chunk方法

在html中应用循环

HTML

///从循环..等中输入每个图像

TypeScript/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;
 }

//从服务器获取图像/数据
getUserFavorite（）{
此._productService.getUserFavorite（this.loggedInUsername）。订阅(
（res）=>{
如果（本标准宽度>1300）{
这个favCount=4；
}否则，如果（此.scrWidth1025）{
这个.favCount='3'；
}否则，如果（this.scrwidth）你找到答案了吗？@Ahsan没有，我没有找到答案
    //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;
 }