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 Madalina Taina

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">
<script src="http://www.owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.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>

CSS

#owl-demo .item img {
    display: block;
    width: 100%;
    height: auto;
}

.owl-theme .owl-controls {
    position: relative;
}

.owl-theme .owl-controls .item-link {
    position: relative;
    display: block;
    width: 100px;
    height: 40px;
    margin: 0 2px;
    border-bottom: 4px solid #ccc;
    outline: none;
}

.owl-theme .owl-controls .item-link:focus {
    -webkit-box-shadow: 0 0 8px #cc4895;
    -moz-box-shadow: 0 0 8px #cc4895;
    box-shadow: 0 0 8px #cc4895;
    outline: none;
}

.owl-theme .owl-controls .active .item-link {
    border-bottom: 4px solid #cc4895;
}

.owl-theme .owl-controls .owl-page span {
    display: none;
}

.owl-theme .prev-owl,
.owl-theme .next-owl {
    position: absolute;
    top: 5px;
    display: block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #c0c0c0;
    outline: none;
}

.owl-theme .prev-owl:focus,
.owl-theme .next-owl:focus {
    -webkit-box-shadow: 0 0 8px #cc4895;
    -moz-box-shadow: 0 0 8px #cc4895;
    box-shadow: 0 0 8px #cc4895;
}

.owl-theme .prev-owl {
    left: 24px;
}

.owl-theme .next-owl {
    right: 24px;
}

JavaScript

var owl;

$(document).ready(function () {

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

    owl.owlCarousel({

        navigation: false, // Show next and prev buttons
        slideSpeed: 300,
        paginationSpeed: 400,
        singleItem: true,
        afterInit: afterOWLinit, // do some work after OWL init
        afterUpdate : afterOWLinit
    });
    
    

    
    function afterOWLinit() {

        // adding A to div.owl-page
        $('.owl-controls .owl-page').append('<a class="item-link" href="#"/>');

        var pafinatorsLink = $('.owl-controls .item-link');

        /**
         * this.owl.userItems - it's your HTML <div class="item"><img src="http://www.ow...t of us"></div>
         */
        $.each(this.owl.userItems, function (i) {

            $(pafinatorsLink[i])
                // i - counter
                // Give some styles and set background image for pagination item
                .css({
                    'background': 'url(' + $(this).find('img').attr('src') + ') center center no-repeat',
                    '-webkit-background-size': 'cover',
                    '-moz-background-size': 'cover',
                    '-o-background-size': 'cover',
                    'background-size': 'cover'
                })
                // set Custom Event for pagination item
                .click(function () {
                    owl.trigger('owl.goTo', i);
                });

        });



        // add Custom PREV NEXT controls
        $('.owl-pagination').prepend('<a href="#prev" class="prev-owl"/>');
        $('.owl-pagination').append('<a href="#next" class="next-owl"/>');


        // set Custom event for NEXT custom control
        $(".next-owl").click(function () {
            owl.trigger('owl.next');
        });

        // set Custom event for PREV custom control
        $(".prev-owl").click(function () {
            owl.trigger('owl.prev');
        });

    }

});