引導縮略圖單個圖像滑塊的小圖像（或更多數量的圖像）

Question

http://bootsnipp.com/snippets/featured/thumbnail-carousel-single-image-sliding

我上述鏈路工作。只有3張圖片沒有問題。但是如果我需要超過3張圖片來顯示，那我也得到了空白的col-md-2圖片。它只顯示3張圖像。

這是因爲我需要更改JavaScript，讓我解決上述問題。

you can have a look at this image, i have changed div size to col-2

Answer 1

您可以在JavaScript中這樣的改變：

$(document).ready(function() { 
    $('#myCarousel').carousel({ 
     interval: 10000 
    }) 
    $('.fdi-Carousel .item').each(function() { 
     var next = $(this).next(); 
     if (!next.length) { 
      next = $(this).siblings(':first'); 
     } 
     next.children(':first-child').clone().appendTo($(this)); 

     if (next.next().length > 0) { 
      next.next().children(':first-child').clone().appendTo($(this)); 
     } 
     else { 
      $(this).siblings(':first').children(':first-child').clone().appendTo($(this)); 
     } 

     if (next.next().next().length > 0) { 
      next.next().next().children(':first-child').clone().appendTo($(this)); 
     } 
     else { 
      $(this).siblings(':first').children(':first-child').clone().appendTo($(this)); 
     } 
     if (next.next().next().next().length > 0) { 
      next.next().next().next().children(':first-child').clone().appendTo($(this)); 
     } 
     else { 
      $(this).siblings(':first').children(':first-child').clone().appendTo($(this)); 
     } 
    }); 
}); 

這5個圖像工作。如果你想要它像6個以上的5個圖像，然後再添加一個if-else條件。

if (next.next().next().next().next().length > 0) { 
     next.next().next().next().next().children(':first-child').clone().appendTo($(this)); 
    } 
    else { 
     $(this).siblings(':first').children(':first-child').clone().appendTo($(this)); 
    } 

因爲它計算了它的兄弟姐妹的長度。

這是工作代碼爲6個圖像與div大小col-md-2