How to Add Multiple items per slide in bootstrap carousel

<div id="Carousel" class="carousel slide cs-carousal-items  cs-multi-item-carousel" data-ride="carousel" data-type="multi" data-interval="2000">
    <div class="carousel-inner" role="listbox">
        <div class="item active  " >
            <div class="col-sm-3 col-xs-12">
                <img src="image1.jpg">
            </div>  
        </div>
        <div class="item active  " >
            <div class="col-sm-3 col-xs-12">
                <img src="image2.jpg">
            </div>  
        </div>
        <div class="item active  " >
            <div class="col-sm-3 col-xs-12">
                <img src="image4.jpg">
            </div>  
        </div>
        <div class="item active  " >
            <div class="col-sm-3 col-xs-12">
                <img src="image5.jpg">
            </div>  
        </div>
    </div>
    <a class="left carousel-control" href="#Carousel" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#Carousel" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
        <span class="sr-only">Next</span>
    </a>
<script type="text/javascript">
$('.cs-multi-item-carousel[data-type="multi"] .item').each(function() {
    var next = $(this).next();
    if (!next.length) {
        next = $(this).siblings(':first');
    }
    next.children(':first-child').clone().appendTo($(this));
    var itemPerSlide =3;
    for (var i = 0; i < itemPerSlide; i++) {
        next = next.next();
        if (!next.length) {
            next = $(this).siblings(':first');
        }

        next.children(':first-child').clone().appendTo($(this));
    }
});
</script>

Leave a Comment