owl carousel slider in multi lines

HTML

<div id="owl-demo" class="owl-carousel">
    <div>
        <img class='lazyOwl' src="http://localhost/LichField/wp-content/uploads/2015/11/gallery.png" alt="" />
        <img class='lazyOwl' src="http://localhost/LichField/wp-content/uploads/2015/11/gallery.png" alt="" />
    </div>
    <div>
        <img class='lazyOwl' src="http://localhost/LichField/wp-content/uploads/2015/11/gallery.png" alt="" />
        <img class='lazyOwl' src="http://localhost/LichField/wp-content/uploads/2015/11/gallery.png" alt="" />
    </div>
    <div>
        <img class='lazyOwl' src="http://localhost/LichField/wp-content/uploads/2015/11/gallery.png" alt="" />
        <img class='lazyOwl' src="http://localhost/LichField/wp-content/uploads/2015/11/gallery.png" alt="" />
    </div>
    <div>
        <img class='lazyOwl' src="http://localhost/LichField/wp-content/uploads/2015/11/gallery.png" alt="" />
        <img class='lazyOwl' src="http://localhost/LichField/wp-content/uploads/2015/11/gallery.png" />
    </div>
    <div>
        <img class='lazyOwl' src="http://localhost/LichField/wp-content/uploads/2015/11/gallery.png" alt="" />
        <img class='lazyOwl' src="http://localhost/LichField/wp-content/uploads/2015/11/gallery.png" />
    </div>
    
</div>

STYLE

#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
}

JS

/* Gallery single */
jQuery(document).ready(function () {
   jQuery("#owl-demo").owlCarousel({
        navigation: true,
        pagination: true,
        lazyLoad: true,
		
		autoPlay: 3000, //Set AutoPlay to 3 seconds
     	items : 3,
        itemsDesktop : [1199,3],
        itemsDesktopSmall : [979,3],
	});
});
Advertisements

Tagged: ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: