Kích hoạt băng chuyền con số trang tiếp theo 2

Question

Tôi đang sử dụng Owl Carousel 2 và tôi có các nút điều hướng tùy chỉnh mà tôi định sử dụng cho mục tiếp theo/trước và trang tiếp theo/trước. Tôi đang sử dụng những điều sau đây để kích hoạt các mục tiếp theo:

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

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

đó làm việc tốt, nhưng tôi cũng cần phải kích hoạt trang tiếp theo (tương tự như cách các dấu chấm làm việc). Có vẻ như có một tùy chọn slideBy mà bạn có thể sử dụng để trượt trang, nhưng điều này sẽ không giúp ích gì vì tôi cần cả điều hướng trang và mục.

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

Answer 1

Bạn có thể kích hoạt nhấp chuột vào dấu chấm:

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

Để đi đến trang tiếp theo hoặc để là người đầu tiên nếu bạn đang ở trên người cuối cùng, bạn có thể làm điều đó như thế này:

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

Bạn có thể kích hoạt nhấp chuột đến trang tiếp theo (thanh trượt) chỉ thêm tùy chọn

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