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和{{1}旁边}。更令人沮丧的是，我的每个.title元素都包含我的.col-xs-6，这让我很紧张。

总而言之，我需要创建一个循环，而不必遍历我的项目，直到我有足够的时间来完全填充.navigation-controls（复制我的DOM的一部分）。

Answer 1

实现这一目标的最简单方法是引入一些插件。 我强烈推荐光滑的滑块：http://kenwheeler.github.io/slick/

配置它将是：

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

}）;