猫头鹰旋转木马导航不起作用

Posted 2023-05-07

【中文标题】猫头鹰旋转木马导航不起作用

【英文标题】：Owl Carousel Navigation not working

【发布时间】：2017-03-30 17:09:49

【问题描述】：

我有 2 个轮播，一个在另一个下，我正在使用“navContainer”功能来更改导航箭头的位置（我将它们放在滑块上方）。

当我有一个滑块时，它可以工作，但是当我有 2 个（或更多）时，两个滑块的导航都位于第一个“navhere”div 中。而不是这样，每个导航按钮都应该在自己的 div 中。

您可以更好地了解我在这里所说的内容：http://jsfiddle.net/vnpm1y06/226/

代码是：

<div class="about">
    <div id="navhere"></div> <!-- This is where nav should appear -->
    <div class="owl-carousel">
        <div class="item"><h4>About</h4></div>
        <div class="item"><h4>Us</h4></div>
    </div>
</div>
<div class="contact">
    <div id="navhere"></div> <!-- This is where nav should appear -->
    <div class="owl-carousel">
        <div class="item"><h4>Contact</h4></div>
        <div class="item"><h4>Form</h4></div>
    </div>
</div>

jquery 是

 .owlCarousel(
        loop: true,
        margin: 10,
        nav: true,
        dots:false,
        items:1,
        navContainer: '#navhere'
    )

【问题讨论】：

在这里工作得很好：jsfiddle.net/vnpm1y06/226。是的，它显示两个是因为有两个滑块。每个滑块都有自己的导航。

确实如此，它们滑动，但两个滑块的导航存储在第一个“navhere”div 中。他们应该各自在自己的 div 中。 aka，第二个 div“navhere”是空的，这就是第二张幻灯片的导航应该显示的地方

从脚本中移除 navcontainer 并通过 css 管理他们的位置。

【参考方案1】：

您不能复制id 的值。它必须是独一无二的。就是这个原因。

还是。根据this issue的说法，多重导航尚未实现！

【讨论】：

惭愧，我现在不知道该怎么办，但无论如何，非常感谢您的帮助！

如果我不无聊（我觉得我很坚强......）你能看看这个jsfiddle.net/b5bqk68j/24吗？如果您有任何 cmets，那将意味着很多...

我想我找到了解决方案 :) jsfiddle.net/9nm4ctv9/847 不过，再次感谢大家的帮助！

非常感谢！我找到了分页的解决方案：appendDots:$(this).siblings('.pagination')，但这仅适用于 .pagination 与滑块的兄弟姐妹。如果是上一级呢？

哈哈...好吧...那么添加它作为兄弟。

【参考方案2】：

导航不起作用

.owlCarousel(
        startPosition: 0,
        margin: 20,
        dots: true,
        loop: true,
        autoplay: true,
        nav: true,
        pagination :true,
        autoplayTimeout:6000,
        responsiveClass:true,
        responsive:
            0:

                items:1
            ,
            480:

                items:2
            ,
            568:

                items:2
            ,
            667:

                items:2
            ,
            768:

                items:3
            ,
            1024:
                items:5
            
        
    );
);

【参考方案3】：

如果您的可查看项目少于总项目，则导航将自动禁用。换句话说，您必须有足够的项目来查看 Owl-carouse 提供的导航

【讨论】：

这应该是对问题的评论