OWL carousel with image preview pagination

https://github.com/defaye/OwlCarouselImagePreviewPaginator

by defaye

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.transitions.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
<div id="owl-demo" class="owl-carousel owl-theme">

    <div class="item"><img src="http://www.lorempixel.com/960/350?1"></div>
    <div class="item"><img src="http://www.lorempixel.com/960/350?2"></div>
    <div class="item"><img src="http://www.lorempixel.com/960/350?3"></div>

</div>

SCSS

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

.owl-theme {
    .owl-controls {
        position: relative;
        .owl-page {
            position: relative;
            display: inline-block;
            width: 6em;
            height: 3em;
            margin: 0 .25em;
            outline: none;
            &:focus {
                outline: none;
            }
            span {
                display: none;
            }
            transition: all .1s ease-in-out;
            &.active {
                transform: scale(1.1);
            }
            &:not(.active) {
                transform: scale(0.8);
                -webkit-box-shadow: inset 0 0 10em 0 rgba(0,0,0,.75);
                box-shadow: inset 0 0 10em 0 rgba(0,0,0,.75);
                &:hover {
                    transform: scale(0.9);
                }
            }
        }
        .owl-buttons {
            .owl-prev, .owl-next {
                font-size: 2em;
                display: block;
                position: absolute;
                top: 0;
                line-height: .75em;
                width:  1em;
                height: 1em;
                border-radius: 1px;
                    background-color: #c0c0c0;
                    &:focus {
                        -webkit-box-shadow: inset 0 0 10em 0 rgba(255,0,0,.75);
                        box-shadow: inset 0 0 10em 0 rgba(255,0,0,.75);
                    }
            }
            .owl-prev {
                left:  .25em;
            }
            .owl-next {
                right: .25em;
            }
        }
    }
}

JavaScript

$(document).ready(function () {
    $("#owl-demo").owlCarousel({
        navigation: true,
        navigationText: ['&lsaquo;','&rsaquo;'],
        slideSpeed: 300,
        paginationSpeed: 400,
        singleItem: true,
        afterInit: makePages,
        afterUpdate: makePages
    });
    function makePages() {
        $.each(this.owl.userItems, function(i) {
            $('.owl-controls .owl-page').eq(i)
                .css({
                    'background': 'url(' + $(this).find('img').attr('src') + ')',
                    'background-size': 'cover'
                })
        });
    }
});