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

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<link rel="stylesheet" href="https://dl.dropboxusercontent.com/u/64049693/owl/owl.carousel.css">
<link rel="stylesheet" href="https://dl.dropboxusercontent.com/u/64049693/owl/owl.theme.css">
<script src="https://dl.dropboxusercontent.com/u/64049693/owl/owl.carousel.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<div id="custom-pag-place"></div>

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

    <div class="item"><img src="https://s3.amazonaws.com/yoobe-images/2/480x480/AOP9157c457a789e89cd909daad16e153bfresult.png" alt="The Last of us"></div>
    <div class="item"><img src="https://s3.amazonaws.com/yoobe-images/2/480x480/AOP9157c457a789e89cd909daad16e153bfresult.png" alt="GTA V"></div>
    <div class="item"><img src="https://s3.amazonaws.com/yoobe-images/2/480x480/AOP9157c457a789e89cd909daad16e153bfresult.png" alt="Mirror Edge"></div>
    <div class="item"><img src="https://s3.amazonaws.com/yoobe-images/2/480x480/AOP9157c457a789e89cd909daad16e153bfresult.png"></div>
  <div class="item"><img src="https://dl.dropboxusercontent.com/u/64049693/owl/fullimage7.jpg"></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: 80px;
    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;
    line-height: 30px;
    border-radius: 50%;
    background-color: #c0c0c0;
    color: #333;
    outline: none;
    z-index: 100;
}

.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;
}

.owl-pagination{
    width: 100%;
    height: 44px;
    margin: 0 auto;
    overflow: hidden;
}

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
    });
    
    function afterOWLinit() {
        // adding A to div.owl-page
        $('.owl-controls .owl-page').append('<a class="item-link" href="#"/>');
        var paginatorsLink = $('.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) {
            $(paginatorsLink[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"><i class="fa fa-chevron-left"></i></a>');
        $('.owl-pagination').append('<a href="#next" class="next-owl"><i class="fa fa-chevron-right"></i></a>');

        // 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');
        });
    }
});