触发下一页 owl carousel 2答案

【问题标题】：Trigger next page owl carousel 2触发下一页 owl carousel 2
【发布时间】：2015-08-29 17:05:20
【问题描述】：

我正在使用 Owl Carousel 2，并且我有自定义导航按钮，我打算将其用于下一个/上一个项目和下一个/上一个页面。我正在使用以下内容来触发下一项：

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

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

效果很好，但我还需要触发下一页（类似于点的工作方式）。看起来有一个 slideBy 选项可用于按页面滑动，但这无济于事，因为我需要项目和页面导航。

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

【问题讨论】：

标签： jquery owl-carousel

【解决方案1】：

您可以触发对点的点击：

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

要转到下一页或如果您在最后一页，您可以这样做：

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】：

您可以触发点击下一页（滑块）仅添加选项

slideBy: 3

...... 响应：{ 0：{ 项目：1，导航：假 }, 600：{ 幻灯片：3，项目：3，导航：真 }, 1000：{ slideBy: 3, //触发下一页点击导航的选项。项目：3，导航：真，循环：真 } } ......

【讨论】：

【解决方案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');
    }            
})

【讨论】：