猫头鹰轮播使用同位素缩略图作为页面导航

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/