How to create Bootstrap’s carousel to show multiple items per slide?

How to create Bootstrap’s carousel to show multiple items per slide? It is very easy to create carousel slider by the bootstrap. You can easily create by follow my instruction, just copy my code and paste into your theme template.

<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=”your image url here” class=”img-responsive”></a></div>
</div>
<div class=”item”>
<div class=”col-xs-4″><a href=”#1″><img src=”your image url here” class=”img-responsive”></a></div>
</div>
<div class=”item”>
<div class=”col-xs-4″><a href=”#1″><img src=”your image url here” class=”img-responsive”></a></div>
</div>
<div class=”item”>
<div class=”col-xs-4″><a href=”#1″><img src=”your image url here” class=”img-responsive”></a></div>
</div>
<div class=”item”>
<div class=”col-xs-4″><a href=”#1″><img src=”your image url here” class=”img-responsive”></a></div>
</div>
<div class=”item”>
<div class=”col-xs-4″><a href=”#1″><img src=”your image url here” class=”img-responsive”></a></div>
</div>
<!– add more items here –>
<!– Example item start: –>

<div class=”item”>
<div class=”col-xs-4″><a href=”#1″><img src=”your image url here” class=”img-responsive”></a></div>
</div>

<!– Example item end –>
</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>


// Instantiate the Bootstrap carousel
$(‘.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));
}
});

​Leave a Comment

Comment authors age:




How to create conditional fields using Contact Form 7 without any plugin in WordPress?

How to Create Custom Simple Typing Carousel by jQuery