Owl Carousel using isotope thumbnails as page navigation

Question

I have an Owl Carousel with 3 images displayed at a time. There are next and prev buttons, but I also wish to have a custom pagination. Instead of dots, I wish to have a separate grid of corresponding isotope thumbnail images below, which when clicked, go to the corresponding image. It would also be an idea to add an overlay to the thumbnail of the corresponding image that is active at that time, I adapted this:

https://jsfiddle.net/j1fjk201/13/

to this:

https://jsfiddle.net/j1fjk201/10/

But it doesn't work now?!

$(document).ready(function () {

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

    owl.owlCarousel({

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

Answer 1

Here is a fiddle for you:

HTML:

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

JS:

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

    }

});

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

http://jsfiddle.net/Gaziev/EGrGN/light/