Question

我正在实施Bootstrap Carousel，用于在每个轮播项目中查看多个图像缩略图（4个图像）。当我点击下一个或上一个控件时，它应该只滑出4个图像。我怎样才能实现这一点。

我已经尝试过这个例子suggested by skelly，但是当我实现它时，它只在旋转木马上显示一个图像，当我点击prev / next控件时，除了前一个图像之外，只显示了一个图像。我需要一直显示四张图像。如果左边的1张图像熄灭，那么同时应该从右边插入1张图像。我另外添加了“jquery / 1.11.1 / jquery.min.js”和“bootstrap-3.2.0-dist / bootstrap.js”，但它没有用。

我实现的代码如下：

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="./bootstrap-3.2.0-dist/js/bootstrap.js"></script>

<script type="text/javascript">
$('#myCarousel').carousel({
interval: 4000
})

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

<style type="text/css">
.carousel-inner .active.left { left: -25%; }
.carousel-inner .next        { left:  25%; }
.carousel-inner .prev    { left: -25%; }
.carousel-control        { width:  4%; }
.carousel-control.left,.carousel-control.right {margin-left:15px;background-image:none;}
</style>

</head>

<body>
<div class="col-md-12 text-center"><h3>Bootstrap 3 Multiple Slide Carousel</h3></div>
<div class="col-md-6 col-md-offset-3">
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="item active">
  <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/e499e4/fff&amp;text=1" class="img-responsive"></a></div>
</div>
<div class="item">
  <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/e477e4/fff&amp;text=2" class="img-responsive"></a></div>
</div>
<div class="item">
  <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/eeeeee&amp;text=3" class="img-responsive"></a></div>
</div>
<div class="item">
  <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/f4f4f4&amp;text=4" class="img-responsive"></a></div>
</div>
<div class="item">
  <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/f566f5/333&amp;text=5" class="img-responsive"></a></div>
</div>
<div class="item">
  <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/f477f4/fff&amp;text=6" class="img-responsive"></a></div>
</div>
<div class="item">
  <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/eeeeee&amp;text=7" class="img-responsive"></a></div>
</div>
<div class="item">
  <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/fcfcfc/333&amp;text=8" class="img-responsive"></a></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>
 </div>

</body>
</html>

任何建议都将受到高度赞赏。

Answer 1

我从bootply实现了滑块，但前一个按钮没有按预期工作。我通过在CSS文件中添加.carousel-inner .active.right { left: 25%; }来修复它。

Answer 2

我发现Skelly's suggestion有效：一个图像被删除，另一个图像被添加，这样就可以同时显示四个图像。

Bootstrap：在旋转木马的项目中的多个图像中仅滑动一个图像

2 个答案: