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

Bootstrap轮播一个接一个地传递元素

1 个答案: