0
ブートストラップカウサールのピクチャ数を変更する方法。 次のコードでは、デフォルトで3つの画像が表示され、他のものを見るためにスクロールすることができるので、3の代わりに4または5または6に番号を変更したいと思います。ブートストラップCarousal - ピクチャ数
ブートストラップ・カロサル。画像
HTMLの変更デフォルト番号：私はしたい、
ので、代わりの3枚の絵：
<div class="container">
<h1>Use Bootstrap's carousel to show multiple items per slide.</h1>
<div class="row">
<div class="col-md-12">
<div class="carousel slide multi-item-carousel" id="theCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-4"><a href="#1"><img src="http://placehold.it/300/f44336/000000" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-4"><a href="#1"><img src="http://placehold.it/300/e91e63/000000" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-4"><a href="#1"><img src="http://placehold.it/300/9c27b0/000000" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-4"><a href="#1"><img src="http://placehold.it/300/673ab7/000000" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-4"><a href="#1"><img src="http://placehold.it/300/4caf50/000000" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-4"><a href="#1"><img src="http://placehold.it/300/8bc34a/000000" class="img-responsive"></a></div>
</div>
</div>
<a class="left carousel-control" href="#theCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#theCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
</div>
</div>
はJavaScript
$('.multi-item-carousel').carousel({
interval: false
});
// for every slide in carousel, copy the next slide's item in the slide.
// Do the same for the next, next item.
$('.multi-item-carousel .item').each(function() {
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
if (next.next().length > 0) {
next.next().children(':first-child').clone().appendTo($(this));
} else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
それは以下のように画像を表示します4枚か5枚の写真を表示するには、私はしませんスクリプトに関連するすべての設定。
は、私にはわからないのが、これはブートストラップ2では不可能でしたが、この人は回避策や並べ替えがありました... http：//stackoverflow.com/questions/9745746/twitter-bootstrap-2-carousel-display-a-set-of-thumbnails-一度に - like-jcarou/9758836＃9758836 – CZorio
http://www.owlcarousel.owlgraphic.com/このプラグインは、あなたが望むことをするのに役立ちます –