Bootstrap轮播;使用.forEach循环并在每张幻灯片中显示x多个项目

Question

我的bootstrap轮播结构如下所示：

我正在使用切片工作：

final_push.push(items.image_urls.slice(0,5))＃我使用以下代码获取每张幻灯片的每5个项目。截至目前它并没有这样做，而是创建3张幻灯片，第一张幻灯片上有一张图片，第二张幻灯片上有2张图片，第三张幻灯片上有3张图片。

var new_html = `    
        <div id="myCarousel`+current_index+`" class="carousel slide">
            <div class="carousel-inner">var image_collection = '' # empty 

我稍后用列div附加的变量。

var row = 0


final_push[0].forEach(function(results)
{

    row++
    image_collection += `<div style='margin-left:12%;' onclick = 
     "setMainImage('`+results+`')" style="display:inline-block;max-
      width:100%; width:20%;max-height: 20%;" class="col-sm-2"><img  
      style=" border-radius: 8px; height:100px;" src="`+results+`"  
     class="img-responsive" alt="test1">
                                                     </div>`
    if(row == 1){
     new_html += `<div class="item active"><div class="row">`
     new_html += image_collection

    }else{
        new_html += `<div class="item"><div class="row">`
        new_html += image_collection
    }
    new_html +=`
       </div>
    </div>`

new_html +=`
    </div>
       <a style="color:blue; font-size:3.0vw;" class="left carousel-control" href="#myCarousel`+current_index+`" data-slide="prev"> ‹
        </a>

      <a style="color:blue; font-size:3.0vw;" class="right carousel-control" href="#myCarousel`+current_index+`" data-interval="false"  data-slide="next">›
       </a>
  </div>`

上面的代码编译成一个带有混乱循环索引的正确轮播。

我的目标是每张幻灯片显示3个项目。

我的策略是在我的幻灯片上建造行;和列作为网格中的项目。 它似乎没有用。 我也没有正确切片;我认为。这就是我当前的屏幕：

第一个网格就像这样

第二个网格看起来像这样

第三个网格看起来像

这也是;不会比我的数组中的第3项循环更远;例如，我有一个图像URLS数组。

[＆＃39; imgurl1＆＃39;，＆＃39; imgurl2＆＃39;，＆＃39; imgurl3＆＃39;，＆＃39; imgUrl4＆＃39;，＆＃39; imgUrl5＆＃39;，＆ ＃39; imgUrl6＆＃39;]

^这是我从items.image_urls获得的数据类型 以下数组应创建2张幻灯片，每张幻灯片包含3个项目。

现在;我没有做任何事情;我有一种感觉，我做错了什么。由于我使用JS构建HTML，因此看起来非常混乱;对此道歉。