触发下一页猫头鹰旋转木马2

Question

我使用猫头鹰旋转木马2，我有自定义的导航按钮，我打算用于next/prev项目和next/prev页面。我使用以下触发下一个项目：

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

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

这工作正常，但我也需要触发下一个页面（类似点是如何工作的）。它看起来像有一个slideBy选项可用于按页面滑动，但这不会有帮助，因为我需要项目和页面导航。

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

Answer 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(); 
}); 

Answer 2

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

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

Answer 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'); 
    }    
})