使用同位素缩略图作为页面导航的 Owl Carousel

Question

我有一个猫头鹰轮播，一次显示 3 张图像。有下一个和上一个按钮，但我也希望有一个自定义分页。而不是点，我希望在下面有一个单独的相应同位素缩略图网格，单击它时，转到相应的图像。将叠加层添加到当时处于活动状态的相应图像的缩略图上也是一个想法，我对此进行了调整：

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

到这里：

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

但是现在不行了？！

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

这是给你的小提琴：

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/