Bootstrap傳送帶控制下一行中的可見物品

Question

我目前的傳送帶（v3.3.7）有3個項目，其中2個默認顯示。當我點擊「下一個」時，我想顯示第二個和第三個，然後點擊下一個第三個和第一個，依此類推。

當前僞HTML看起來像這樣：

.row 
    .col-xs-6 
     .title 
     .text 
    .col-xs-6 
     .title 
     .text 
.row 
    .col-xs-6 
     .title 
     .text 
.navigation-controls 

默認情況下，如你想象，我看到：1 | 2和一下旁邊，我看到3 | (blank)

我已經試過許多變化infinite loop javascript snippet hack several are talking about，但所有這些對我來說都是在.col-xs-6元素內添加下一張幻燈片，旁邊是我的.text和.title。更令人沮喪的是，我的每個.col-xs-6元素也包含我的.navigation-controls，坦率地說，這讓我很緊張。

底線，我需要創建一個循環，而不必循環我的項目，直到我有足夠的空間填充我的.row s（複製我的DOM的一部分）。

Answer 1

實現此目的的最簡單方法是引入一些插件。 我會強烈建議滑頭滑：http://kenwheeler.github.io/slick/

配置爲它應該是：

$('.carouselWrapper').slick({ 
    dots: true, 
    infinite: true, 
    speed: 300, 
    slidesToShow: 2, 
    adaptiveHeight: true 

}）;