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 

}）;