twitter-bootstrap Bootstrap：在轮播的一个项目中的多个图像中只滑动一个图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24926919/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap: Slide only one image among the multiple images in an item of the carousel
提问by NawazSE
I am implementing the Bootstrap Carousel for making view multiple image thumbnail (4 images) in each carousel item. When I click on the next or prev control then it should slide only 1 image out of 4. How can I achieve this.
我正在实施 Bootstrap Carousel，以便在每个轮播项目中查看多个图像缩略图（4 个图像）。当我单击下一个或上一个控件时，它应该只从 4 个图像中滑出 1 个图像。我怎样才能做到这一点。
I already tried this example suggested by skellybut when I implement it shows only a single image on the carousel and when I click on the prev/next control then only one more image is showing besides the earlier one. I need Four images to be shown all the times. if 1 image from left is goes out then at the same time 1 more image should be inserted from the right. I added the "jquery/1.11.1/jquery.min.js" and "bootstrap-3.2.0-dist/bootstrap.js" additionally but it didn't work.
我已经尝试过skelly 建议的这个例子，但是当我实现它时，它只在轮播上显示一个图像，当我点击上一个/下一个控件时，除了前一个图像之外只显示一个图像。我需要一直显示四张图像。如果左侧的 1 个图像消失，则同时应从右侧插入另外 1 个图像。我另外添加了“jquery/1.11.1/jquery.min.js”和“bootstrap-3.2.0-dist/bootstrap.js”，但没有用。
my implemented code is as:
我实现的代码是：
<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&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&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&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&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&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&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&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&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>
Any suggestion would be highly appreciated.
任何建议将不胜感激。
采纳答案by Alex
回答by mongol
I've found that Skelly's suggestionworks: one image is removed as another is added, such that there are four images displayed at any one time.
我发现Skelly 的建议有效：在添加另一个图像时删除一个图像，这样在任何时候都会显示四个图像。
