javascript - 使用 js 数组 for 循环构建每个网格 3 个幻灯片的轮播

Question

下面是发生的事情:总的来说，我正在迭代两个数组。 1个主阵；第二个是主数组的子数组。

我的子数组是 items.image_urls

let urls = items.image_urls.slice();
let result = [] 
var first_index = 0
var html  = `<div id="myCarousel`+current_index+`" class="carousel slide">
                                <div class="carousel-inner">` #I start by defining my carousel here.


while (urls.length > 0) result.push(urls.splice(0, 3));
   result.forEach(function(results){
      first_index++
      if (first_index == 1){
        html += `<div class="item active"><div class="row">`#Here I set the first item to be active; I'm not doing this part right.
      }else{
        html += `<div class="item"><div class="row">` 
      }
      ## Here I loop furthur into my splices; to get the element.


      var image_collection = '' # I set an empty var where eventually I want to append all my images here for my column.
      results.forEach(function(results){
           #Here is where I define my columns; in this case I want 3 columns generated here. 


           #I see rows as slides and columns as items in those rows.


           #As of now I'm doing this:


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

      })
       html += image_collection ## I then add html and image collection together.


   ## here i close up my carousel
    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>`     

   })

问题:1. 进行以下操作；我似乎只获取事件项目的数据；没有其他项目。据说 html += 并没有真正被附加。[我明白了

如何成功创建每张幻灯片包含 3 个项目的引导轮播。

Answer 1

首先，您没有正确使用模板文字。

请查看here详细了解它并利用它使您的代码更简洁。

对于你的问题，

result.push(urls.splice(0, 3));

是你的问题。

您正在插入数组的第一个索引，因此您应该循环遍历 result[0] 而不是 result 数组，如下所示。

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

Here is the fiddle.