javascript - Bootstrap轮播将元素一一传递

Question

我使用带有轮播的 Bootstrap 来移动菜单的元素。

我想查看 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>

Answer 1

轮播不是执行此操作的好方法，但您想显示下一张和上一张图像。

不是我的，但这有点像你想要的 http://www.bootply.com/94444