Owl Carousel

by Vitaly Volovich

HTML

<link rel="stylesheet" href="http://owlgraphic.com/owlcarousel/owl-carousel/owl.theme.css">
<link rel="stylesheet" href="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.css">
<script src="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.min.js"></script>
<div id="owl-demo" class="owl-carousel">
    <div>
        <img class='lazyOwl' data-src="http://placehold.it/200x200/42bdc2/FFFFFF&text=1st Row" alt="" />
    </div>
    <div>
        <img class='lazyOwl' data-src="http://placehold.it/250x250/42bdc2/FFFFFF&text=2nd Row" alt="" />
    </div>
    <div>
        <img class='lazyOwl' data-src="http://placehold.it/200x200/42bdc2/FFFFFF&text=1st Row" alt="" />
    </div>
    <div>
        <img class='lazyOwl' data-src="http://placehold.it/200x200/42bdc2/FFFFFF&text=1st Row" alt="" />
    </div>
    <div>
        <img class='lazyOwl' data-src="http://placehold.it/200x200/42bdc2/FFFFFF&text=1st Row" alt="" />
    </div>
</div>

CSS

#owl-demo .owl-item > div img {
    display: block;
    -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({
        items : 3,
        navigation: true,
        pagination: true,
        lazyLoad: true,
        autoHeight : true
    });
});