引导旋转木马传递元素一个接一个

我正在使用Bootstrap与carousel来移动菜单的元素。

我想看到4个元素并逐个传递

在我的代码中，我的效果是:jsFiddle。(4个元素同时通过) 我代码:

JQuery:

<script type="text/javascript">
$('#myCarousel').carousel({
      interval: 10000
});
$('.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));
      }
    });
</script>

HTML:

<div class="row">
<div class="carousel slide" id="myCarousel">
 <div class="carousel-inner">
<div class="item active">
    <div class="col-xs-3" style="padding-left: 11px;" >
        <a href="#" title="texto1"> <img
            src="http://musiccaptains.com/zh/wp-content/uploads/2012/09/Account.png" class="center-block" 
            />
        </a>
        <p class="lead text-center" style="padding-top: 20px;">text 1</p>
    </div>
</div>
<div class="item">
    <div class="col-xs-3" style="padding-left: 11px;" >
        <a href="#" title="texto1"> <img
            src="http://musiccaptains.com/zh/wp-content/uploads/2012/09/Account.png" class="center-block" 
            />
        </a>
        <p class="lead text-center" style="padding-top: 20px;">text 2</p>
    </div>
</div>
<div class="item">
    <div class="col-xs-3" style="padding-left: 11px;" >
        <a href="#" title="texto1"> <img
            src="http://musiccaptains.com/zh/wp-content/uploads/2012/09/Account.png" class="center-block" 
            />
        </a>
        <p class="lead text-center" style="padding-top: 20px;">text 3</p>
    </div>
</div>
<div class="item">
    <div class="col-xs-3" style="padding-left: 11px;" >
        <a href="#" title="texto1"> <img
            src="http://musiccaptains.com/zh/wp-content/uploads/2012/09/Account.png" class="center-block" 
            />
        </a>
        <p class="lead text-center" style="padding-top: 20px;">text 4</p>
    </div>
</div>
<div class="item">
    <div class="col-xs-3" style="padding-left: 11px;" >
        <a href="#" title="texto1"> <img
            src="http://musiccaptains.com/zh/wp-content/uploads/2012/09/Account.png" class="center-block" 
            />
        </a>
        <p class="lead text-center" style="padding-top: 20px;">text 5</p>
    </div>
</div>
<div class="item">
    <div class="col-xs-3" style="padding-left: 11px;" >
        <a href="#" title="texto1"> <img
            src="http://musiccaptains.com/zh/wp-content/uploads/2012/09/Account.png" class="center-block" 
            />
        </a>
        <p class="lead text-center" style="padding-top: 20px;">text 6</p>
    </div>
</div>
<div class="item">
    <div class="col-xs-3" style="padding-left: 11px;" >
        <a href="#" title="texto1"> <img
            src="http://musiccaptains.com/zh/wp-content/uploads/2012/09/Account.png" class="center-block" 
            />
        </a>
        <p class="lead text-center" style="padding-top: 20px;">text 7</p>
    </div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>