Owl Carousel

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css">
<div id="owl-demo" class="owl-carousel">
    <div>
      <div>1</div>
      <div>2</div>
    </div>
    <div>
       <div>1</div>
       <div>2</div>
    </div>
    <div>
       3
    </div>
    <div>
        4
    </div>
    <div>
       5
    </div>
    <div>
        6
    </div>
    <div>
        7
    </div>
</div>

CSS

#owl-demo .owl-item > div img {
    display: block;
    width: 100%;
    height: auto;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    margin-bottom:4px;
}
#owl-demo .owl-item > div {
    padding: 0px 2px
}

JavaScript

$(document).ready(function () {
    $("#owl-demo").owlCarousel({
        navigation: true,
        pagination: true
    });
});