For example I have the following code:
<div class="col-md-12 text-center"><h3>Bootstrap 3 Multiple Slide Carousel DESKTOP</h3></div>
<div class="col-md-6 col-md-offset-3">
<div class="carousel slide" id="myCarouselDesktop">
<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>
<a class="left carousel-control" href="#myCarouselDesktop" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#myCarouselDesktop" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
Now mobile mode:
Bootstrap 3 Multiple Slide Mobile Carousel
<div class="col-md-12 col-md-offset-3">
<div class="carousel slide" id="myCarouselMobile">
<div class="carousel-inner">
<div class="item active">
<div class="col-lg-12"><a href="#"><img src="http://placehold.it/500/e499e4/fff&text=1"class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-lg-12"><a href="#"><img src="http://placehold.it/500/e477e4/fff&text=2"class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-lg-12"><a href="#"><img src="http://placehold.it/500/eeeeee&text=3"class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-lg-12"><a href="#"><img src="http://placehold.it/500/f4f4f4&text=4"class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-lg-12"><a href="#"><img src="http://placehold.it/500/f566f5/333&text=5"class="img-responsive"></a></div>
</div>
</div>
<a class="left carousel-control" href="#myCarouselMobile" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#myCarouselMobile" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
CSS Code:
/**** MOBILE when the viewport is > 730***/
@media only screen and (min-width: 730px) {
#myCarouselDesktop {
display: block;
text-align: center;
}
#myCarouselMobile {
display: none;
}
}
/**** DESKTOP when the viewport is < 730px ***/
@media only screen and ( max-width:730px) {
#myCarouselDesktop {
display: none;
}
#myCarouselMobile {
display: block;
text-align: center;
}
}
JavaScript code:
$('#myCarouselDesktop').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));
}
});