Twitter Bootstrap - 多图像（缩略图）旋转木马 - 每次移动一个缩略图

Question

我正在尝试使用Twitter bootstrap 3。我对HTML、CSS和Javascript相当新手。我创建了一个轮播图，它的代码如下：

<div class="container">
    <div id="myCarousel2" class="carousel slide">
        <!-- Carousel items -->
        <div class="carousel-inner">
            <div class="item active">
                <div class="row text-center">
                    <!-- ITEM-->
                    <div class="col-md-3">
                        <div class="thumbnail product-item">    <a class="img-responsive" href="/current-buzz"><img src="{% static 'img/buzzbutton.jpg' %}"/></a>

                        </div>
                    </div>
                    <!-- ITEM-->

                    <!-- ITEM-->
                    <div class="col-md-3">
                        <div class="thumbnail product-item">    <a class="img-responsive" href="/current-buzz"><img src="{% static 'img/recipebutton.jpg' %}"/></a>

                        </div>
                    </div>
                    <!-- ITEM-->

                    <!-- ITEM-->
                    <div class="col-md-3">
                        <div class="thumbnail product-item">    <a class="img-responsive" href="/current-buzz"><img src="{% static 'img/buzzbutton.jpg' %}"/></a>

                        </div>
                    </div>
                    <!-- ITEM-->

                    <!-- ITEM-->
                    <div class="col-md-3">
                        <div class="thumbnail product-item">    <a class="img-responsive" href="/current-buzz"><img src="{% static 'img/recipebutton.jpg' %}"/></a>

                        </div>
                    </div>
                    <!-- ITEM-->
                </div>
            </div>
            <div class="item">
                <div class="row text-center">
                    <!-- ITEM-->
                    <div class="col-md-3">
                        <div class="thumbnail product-item">    <a class="img-responsive" href="/current-buzz"><img src="{% static 'img/buzzbutton.jpg' %}"/></a>

                        </div>
                    </div>
                    <!-- ITEM-->
                    <!-- ITEM-->
                    <div class="col-md-3">
                        <div class="thumbnail product-item">    <a class="img-responsive" href="/current-buzz"><img src="{% static 'img/recipebutton.jpg' %}"/></a>

                        </div>
                    </div>
                    <!-- ITEM-->
                    <!-- ITEM-->
                    <div class="col-md-3">
                        <div class="thumbnail product-item">    <a class="img-responsive" href="/current-buzz"><img src="{% static 'img/buzzbutton.jpg' %}"/></a>

                        </div>
                    </div>
                    <!-- ITEM-->
                    <!-- ITEM-->
                    <div class="col-md-3">
                        <div class="thumbnail product-item">    <a class="img-responsive" href="/current-buzz"><img src="{% static 'img/recipebutton.jpg' %}"/></a>

                        </div>
                    </div>
                    <!-- ITEM-->
                </div>
            </div>
        </div>
        <!-- /INNER-->
        <!-- Carousel nav -->

        <a class="carousel-control left" href="#myCarousel2" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>

    </div>
</div>

现在设置每次显示4张图片。问题是我有8张图片。在上面的旋转木马中，每次显示4张图片，然后滑动到下一个4张。以下是Javascript代码：

<script type="text/javascript">
$('.carousel.slide').carousel()
</script>

以下是CSS代码：

@media (max-width: 767px){
.carousel .row .span3 {
display: block;
float: left;
width: 25%;
margin-left: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
    }
}
.carousel .carousel-control { visibility: hidden; }

如何让图片在连续循环中单独移动一个?

- rahuL

---

你想让它一次只显示一个，还是显示4个但只移动1个？ - SharkofMirkwood

@SharkofMirkwood - 显示4个，但只移动1个听起来正是我想要做的事情。 - rahuL

啊，好的，那我道歉了，我不知道如何使用Bootstrap的轮播来做到这一点。说实话，我不确定是否可能。当然，只显示一个会更容易！ - SharkofMirkwood

如果我想要4个旋转木马并排放置，每个旋转木马显示一张图片并隐藏指示器图标，这是否可行？ - rahuL

Answer 1

看一下这个 Bootply：http://bootply.com/94452

你可以使用 jQuery 来相应地复制(clone())这些项。

$('.carousel .item').each(function(){
  var next = $(this).next();
  if (!next.length) {
    next = $(this).siblings(':first');
  }
  next.children(':first-child').clone().appendTo($(this));

  for (var i=0;i<2;i++) {
    next=next.next();
    if (!next.length) {
        next = $(this).siblings(':first');
    }

    next.children(':first-child').clone().appendTo($(this));
  }
});

替代方案：Bootstrap轮播多个框架一次性

- Zim

---

很好，感谢提供示例！我遇到了一点麻烦，我正在使用您在上面的bootply链接中放置的代码，但由于某种原因，我每次只能看到一张图片，而不是能够适合轮播的所有图片。我没有更改您的任何代码，但它看起来与该链接中的示例不同。您能想到我可能出了什么问题吗？ - Jake Smith

@JakeSmith 我也遇到了同样的问题。我也忘记在我的脚本中添加jquery部分了。确保你也加上它。 - Dynelight

@JakeSmith 看一下中间顶部的栏目，那里有一个需要放在<script type="text/javascript"></script>标签中的jQuery代码片段。 - Dynelight

看起来bootstrap 3.1.1在处理这些轮播控件方面与bootply演示中使用的3.0.2有些不同。当它移动项目时，每次会移动四个项目。 - Jake Smith

将.carousel-inner .prev { left: -25%; }添加到CSS中。我已更新演示：http://www.bootply.com/94452 - Carol Skelly