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-page {
  display: inline-block;
  margin: 0 .2em;
}

.owl-page > span {
  display: inline-block;
  width: 8px;
  height: 8px;
  
  background-color: #000;

  border-radius: 50%;
}

JavaScript

$(document).ready(function () {
  $("#owl-demo").owlCarousel({
    stagePadding: 50,
    loop:true,
    margin:10,
    nav:true,
    responsive:{
      0:{
        items:1
      },
      600:{
        items:3
      },
      1000:{
        items:5
      }
    }
  })
});