Question

以下是发生的情况：总的来说，我正在迭代两个数组。一个主阵列;第二个是主阵列的子数组。

我的子阵列是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>`     

   })

ISSUE： 1.做以下事情;我似乎只获取项目活动的数据;没有其他物品。被说html +=并没有真正被追加。[我明白了

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

Answer 1

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

请检查here以了解有关它的更多信息，并利用它来使您的代码更清晰。

对于你的问题，

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

是你的问题。

您正在推进数组的第一个索引，因此您需要循环遍历result[0]而不是result数组，而不是像以下一样。

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

Here is the fiddle.

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

1 个答案: