觸發下一頁貓頭鷹旋轉木馬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'); 
    }    
})