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 cintia_rodrigues

HTML

<link rel="stylesheet" href="http://www.owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.css">
<script src="http://www.owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.js"></script>
<div id="owl-demo" class="owl-carousel owl-theme">
    
    <div><img src="http://www.owlgraphic.com/owlcarousel/demos/assets/fullimage1.jpg" alt="The Last of us" title="1st img Title"/></div>
    
    <div><img src="http://www.owlgraphic.com/owlcarousel/demos/assets/fullimage2.jpg" alt="The Last of us" title="2nd img Title"/></div>
    
    <div><img src="http://www.owlgraphic.com/owlcarousel/demos/assets/fullimage3.jpg" alt="The Last of us" title="3rd img Title"/></div>
    
    <div><img src="http://www.owlgraphic.com/owlcarousel/demos/assets/fullimage4.jpg" alt="The Last of us" title="4th img Title"/></div>    
    
</div><!-- / #owl-demo -->

CSS

img{
    display: block;
    width: 100%;
    height: auto;
}

.owl-theme .owl-controls{
	margin: 0;
	text-align: center;
}

/* Styling Pagination*/
.owl-theme .owl-controls .owl-page {
	display: inline-block;
	zoom: 1;
}
.owl-theme .owl-controls .owl-page span {
	display: block;
	margin: 30px 5px;
	font-family: monospace;
	line-height: 1.0;
	color: #d4d4d4;
	text-transform: uppercase;
}
.owl-theme .owl-controls .owl-page.active span {
	color: #333333;
}

JavaScript

var owl;

$(document).ready(function () {

function customPager() {

    $.each(this.owl.userItems, function (i) {

        var titleData = jQuery(this).find('img').attr('title');
        var paginationLinks = jQuery('.owl-controls .owl-pagination .owl-page span');

    $(paginationLinks[i]).append(titleData);

    });

}

    $('.owl-carousel').owlCarousel({
        navigation: false, // Show next and prev buttons
        slideSpeed: 300,
        paginationSpeed: 400,
        singleItem: true,
        afterInit: customPager,
        afterUpdate: customPager
    });

});