Create Bootstrap carousel to show multiple items per slide:
HTML:
<!– slider –>
<div class=”row”>
<div class=”col-md-12″>
<div class=”carousel slide multi-item-carousel” id=”theCarousel”>
<div class=”carousel-inner”>
<?php if(!empty($slider) && count($slider) > 0):?>
<?php foreach($slider as $key =>$slide):?>
<div class=”item <?php if($key==0){ echo “active”; } ?>”>
<div class=”col-md-4 col-sm-6 col-xs-12″>
<a href=”#1″><img src=”<?=base_url(‘assets/images/aboutslider/’)?><?=$slide[‘images’]?>” class=”img-responsive”></a>
</div>
</div>
<?php endforeach?>
<?php endif?>
<!– 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>
<!– slider –>
CSS:
<style type=”text/css”>
.multi-item-carousel{
.carousel-inner{
> .item{
transition: 500ms ease-in-out left;
}
.active{
&.left{
left:-33%;
}
&.right{
left:33%;
}
}
.next{
left: 33%;
}
.prev{
left: -33%;
}
@media all and (transform-3d), (-webkit-transform-3d) {
> .item{
// use your prefixer here
transition: 500ms ease-in-out left;
transition: 500ms ease-in-out all;
backface-visibility: visible;
transform: none!important;
}
}
}
.carouse-control{
&.left, &.right{
background-image: none;
}
}
}
</style>
JS:
<script type=”text/javascript”>
$(‘.multi-item-carousel’).carousel({
interval: false
});
$(‘.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));
}
});
</script>
