OWL carousel with image preview in pagonation items

OWL carousel: https://github.com/OwlFonk/OwlCarousel for issue 130: https://github.com/OwlFonk/OwlCarousel/issues/130

by Abra Cadabra

HTML

<link rel="stylesheet" href="http://www.owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.css">
<link rel="stylesheet" href="http://www.owlgraphic.com/owlcarousel/owl-carousel/owl.theme.css">
<link rel="stylesheet" href="http://www.owlgraphic.com/owlcarousel/owl-carousel/owl.transitions.css">
<script src="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.min.js"></script>
<div id="custom-pag-place"></div>

<div id="owl-demo" class="owl-carousel owl-theme">

    <div class="item"><img src="http://www.owlgraphic.com/owlcarousel/demos/assets/fullimage1.jpg" alt="The Last of us"></div>
    <div class="item"><img src="http://www.owlgraphic.com/owlcarousel/demos/assets/fullimage2.jpg" alt="GTA V"></div>
    <div class="item"><img src="http://www.owlgraphic.com/owlcarousel/demos/assets/fullimage3.jpg" alt="Mirror Edge"></div>

</div>

JavaScript

var owl;

$(document).ready(function () {

    owl = $("#owl-demo");

    owl.owlCarousel({

        navigation: false, // Show next and prev buttons
        slideSpeed: 300,
        paginationSpeed: 400,
        singleItem: true,
        transitionStyle: "fade"
        
    });
    
    

    
    

});