Trigger next page owl carousel 2

Question

Я использую Owl Carousel 2, и у меня есть пользовательские кнопки навигации, которые я намерен использовать для следующего/предыдущего элемента и следующей/предыдущей страницы. Я использую следующие для запуска следующего пункта:

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