owl-carousel

HTML

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.2/owl.carousel.min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.2/owl.carousel.min.css">
<div id="owl-demo">
    <div class="item">
        <img src="http://placehold.it/50x50" alt="Owl Image" />
    </div>
    <div class="item">
        <img src="http://placehold.it/50x50" alt="Owl Image" />
    </div>
    <div class="item">
        <img src="http://placehold.it/50x50" alt="Owl Image" />
    </div>
    <div class="item">
        <img src="http://placehold.it/50x50" alt="Owl Image" />
    </div>
    <div class="item">
        <img src="http://placehold.it/50x50" alt="Owl Image" />
    </div>
    <div class="item">
        <img src="http://placehold.it/50x50" alt="Owl Image" />
    </div>
    <div class="item">
        <img src="http://placehold.it/50x50" alt="Owl Image" />
    </div>
    <div class="item">
        <img src="http://placehold.it/50x50" alt="Owl Image" />
    </div>
</div>

CSS

#owl-demo .item {
    margin: 3px;
}
#owl-demo .item img {
    display: block;
    width: 50%;
    height: auto;
}
.owl-theme .owl-controls .owl-page {
    display: inline-block;
}
.owl-theme .owl-controls .owl-page span {
    background: none repeat scroll 0 0 #869791;
    border-radius: 20px;
    display: block;
    height: 12px;
    margin: 5px 7px;
    opacity: 0.5;
    width: 12px;
}

JavaScript

$(document).ready(function () {

		owl = $("#owl-demo");

    owl.owlCarousel({
       items: 10,
       autoPlay: 1000,
    });
    
    setTimeout(function(){
			owl.data('owlCarousel').destroy();
      owl.owlCarousel({
         items: 5,
         autoPlay: 1000,
      });
    }, 2000);


});