Owl Carousel

by Nibin George

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>
<ul class="tabs"> <a id="blog">Blog</a>
 <a id="news">News</a>
 <a id="gallery">Gallery</a>

</ul>
<div id="canvas">
    <div class="owl">
        <div class="item">
            <img src="http://placehold.it/300x200">
        </div>
        <div class="item">
            <img src="http://placehold.it/300x200">
        </div>
        <div class="item">
            <img src="http://placehold.it/300x200">
        </div>
        <div class="item">
            <img src="http://placehold.it/300x200">
        </div>
        <div class="item">
            <img src="http://placehold.it/300x200">
        </div>
        <div class="item">
            <img src="http://placehold.it/300x200">
        </div>
    </div>
<a class="prev">Prev</a>

<a class="next">Next</a>

</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

function loadGallery(){
    var owl = jQuery('.owl');
    owl.owlCarousel({
        items: 4,
        pagination: false,
    });
}    
jQuery('.next').click(function () {
    owl.trigger('owl.next');
});
jQuery('.prev').click(function () {
    owl.trigger('owl.prev');
});

jQuery(document).on('click', '.tabs a', function (e) {
    e.preventDefault();
});
jQuery(document).on('click', '#news', function (e) {
    jQuery('#canvas').load('news.php');
});
jQuery(document).on('click', '#blog', function (e) {
    jQuery('#canvas').load('blog.php');
});
jQuery(document).on('click', '#images', function (e) {
    jQuery('#canvas').load('images.php');
});