Question

在这里，我正在使用我的猫头鹰轮播脚本，它运行良好。我也想复制它并用作第二个。因此，我复制了总轮播div，并将导航类名称更改为next2。该轮播可以在所有选项下正常工作，但是复制的轮播的导航无法正常工作。

第一个轮播：

<script>
    $(document).ready(function() {
        var owl = $("#owl-demo");
        owl.owlCarousel({
            autoPlay: 10500,
            items : 6,
            itemsDesktop : [1000,6],
            itemsDesktopSmall : [900,4],
            itemsTablet: [600,1],
            itemsMobile : false,
            pagination:false,
        });
        $(".next").click(function(){
            owl.trigger('owl.next');
        });
        $(".prev").click(function(){
            owl.trigger('owl.prev');
        });

    });
</script>

复制轮播：

<script>
    $(document).ready(function() {
        var owl2 = $("#owl-demo2");
        owl2.owlCarousel({
            autoPlay: 10500,
            items : 4,
            itemsDesktop : [1000,4],
            itemsDesktopSmall : [900,3],
            itemsTablet: [600,1],
            itemsMobile : false,
            pagination:false,

        });
        $(".next2").click(function(){
            owl2.trigger('owl.next2');
        });
        $(".prev2").click(function(){
            owl2.trigger('owl.prev2');
        });
    });
</script>

我不明白为什么它不起作用。请帮我一个人。谢谢。

Answer 1

您必须将幻灯片传递给导航，请检查以下代码段

$('.owl-navigations .right').click(function(e) {
    e.preventDefault();

    $('.'+$(this).data('slide')).trigger('next.owl.carousel');
    return false;
})

$('.owl-navigations .left').click(function(e) {
    e.preventDefault();
    $('.'+$(this).data('slide')).trigger('prev.owl.carousel');
    return false;
})

<div class="owl-navigations">
    <a href="#" data-slide="carousel-section-1" class="left">
        <i class="fas fa-chevron-left"></i>
    </a>
    <a href="#" data-slide="carousel-section-1" class="right">
        <i class="fas fa-chevron-right"></i>
    </a>
</div>

<div class="owl-carousel">
    <!-- items -->
</div>

多个猫头鹰轮播导航不起作用

1 个答案: