Javascript Twitter引导-多个图像（缩略图）转盘-一次移动一个缩略图

我正在试用Twitter引导程序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>

---

如何使图像在连续循环中一次只移动一个？

请查看此引导：

可以使用jQuery相应地克隆（）项

$('.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));
  }
});

$（'.carousel.item'）。每个（函数（）{
var next=$（this.next（）；
如果（！next.length）{
next=$（this.sibbines（':first'）；
}
next.children（':first child'）.clone（）.appendTo（$（this））；
对于（var i=0；我想一次只显示一个，还是显示4但只移动1？@Sharkoffmirkwood-显示4但只移动1听起来正是我想做的..啊，对了，我很抱歉，我不知道如何使用Bootstrap的旋转木马。老实说，我不确定这是否可能。当然，一次只显示一个简单多了！如果我有4个旋转木马并排排列，每个都显示一个图像并隐藏指示图标，这可能吗？很好，谢谢你的例子！我有点麻烦，我正在使用你在上面的bootply链接中放置的代码，出于某种原因，我一次只看到一个图像，而不是看到多少图像能够适应旋转木马。我没有更改您的任何代码，但它看起来与该链接中的示例不一样。您能想到我可能出了什么问题吗？@JakeSmith我也有同样的问题。我还忘了在脚本中添加jquery部分。请确保您也添加了该部分。@Dynelight，感谢您的回复：）这可能是一个愚蠢的问题，但你指的是在我的html中的某个地方引用jquery库吗？我是不是因为没有明确包含这些库而错过了一些jquery功能？@JakeSmith看看中上一栏，有一个jquery片段需要放入标记。你指的是问题abo中的那一个吗ve？我在引导层中没有看到任何标签。。。
@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; }

$('.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));
  }
});