Question

我使用Owl carousel 2插件，我希望幻灯片中包含导航按钮（箭头框），我想使用“prev”和“next”箭头进行导航

我的HTML

            <div class="arrow-box">
                <a href="#" class="prev"><i class="fa fa-angle-left"></i></a>
                <a href="#" class="next"><i class="fa fa-angle-right"></i></a>
            </div>

            <div id="owl-demo" class="owl-carousel">
                <div class="item news-post">
                    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse
                    cillum dolore eu fugiat nulla pariatur.</p>
                </div>
                <div class="item news-post">
                    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse
                    cillum dolore eu fugiat nulla pariatur.</p>
                </div>

                <div class="item news-post">
                    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse
                    cillum dolore eu fugiat nulla pariatur.</p>
                </div>
            </div>

我用这个js

var owl = $("#owl-demo").owlCarousel({
        loop:true,
        margin:10,
        responsiveClass:true,
        responsive:{
            0:{
                items:1,
                nav:true
            },
            1000:{
                items:2,
                nav:true,
                loop:true
            }
        }
    });
    owl = $('#owl-demo').owlCarousel();
    $(".arrow-box .next").click(function () {
        owl.trigger('next.owl.carousel');
    });

    $(".arrow-box .prev").click(function () {
        owl.trigger('prev.owl.carousel');
    });

Answer 1

我相信问题在于，您正在制作owl两个声明，var owl = $("#owl-demo").owlCarousel({和owl = $('#owl-demo').owlCarousel();

删除第二个声明。

分别将owl.trigger('next.owl.carousel');和owl.trigger('prev.owl.carousel');更改为owl.trigger('owl.next');和owl.trigger('owl.prev');。

工作小提琴：http://jsfiddle.net/p3d52z4n/187/

猫头鹰旋转木马2导航

1 个答案: