猫头鹰轮播导航无法正常工作

时间:2016-11-16 13:19:33

标签: jquery owl-carousel

我有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'
    })

2 个答案:

答案 0 :(得分:2)

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

静止。根据{{​​3}},多个导航尚未实施!

答案 1 :(得分:0)

导航不起作用

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