触发下一页owl carousel 2。

I'm using Owl Carousel 2 and I have custom nav buttons that I intend to use for next/prev item and next/prev page. I'm using the following to trigger the next item:

我正在使用Owl Carousel 2，并且我有自定义导航按钮，我打算用于next/prev项目和next/prev页面。我用下面的方法触发下一个项目:

var slider = $('.owl-carousel');

$('#nextItem').click(function () {
    slider.trigger('next.owl.carousel');
});

That works fine, but I also need to trigger the next page (similar to how the dots work). It looks like there is a slideBy option that you can use to slide by a page, but this won't help since I need both item and page navigation.

这很好，但我也需要触发下一页(类似于dots的工作方式)。看起来有一个slideBy选项，你可以用它在页面上滑动，但是这没有帮助，因为我需要项目和页面导航。

$('#nextPage').click(function () {
    // go to next page
});

3 个解决方案

#1

You could trigger clicks on the dots:

你可以点击这些点:

// Go to page 3
$('.owl-dot:nth(2)').trigger('click');

To go to the next page or to the first if you're on the last, you can do it like this:

到下一页或第一页如果你在最后一页，你可以这样做:

var $dots = $('.owl-dot');

function goToNextCarouselPage() {    
    var $next = $dots.filter('.active').next();

    if (!$next.length)
        $next = $dots.first();

    $next.trigger('click');
}

$('.something-else').click(function () {
    goToNextCarouselPage();
});

#2

You could trigger clicks to next page (slider) only add option

您可以触发点击到下一页(滑块)只添加选项

slideBy: 3

.....         
responsive:{
                0:{
                    items:1,
                    nav:false
                },
                600:{
                    slideBy: 3,
                    items:3,
                    nav:true
                },
                1000:{
                    slideBy: 3, //Option for trigger next page to click on nav.
                    items:3,
                    nav:true,
                    loop:true
                }
            }
.....

#3

$('#js-carousel-models').owlCarousel({
    center: true,
    items: 1.5,
    loop:true,
    margin: 0,
    dots: true,
    autoplay: true
});

var owl = $('#js-carousel-models');
owl.owlCarousel();

$('.owl-item').click(function() {        
    if( $(this).next().hasClass('center') ){
        // scroll to prev
        owl.trigger('prev.owl.carousel');
    }
    if( $(this).prev().hasClass('center') ){
        // scroll to next
        owl.trigger('next.owl.carousel');
    }            
})

#1