2015-06-13 16 views
5

Sto usando Owl Carousel 2 e ho i pulsanti di navigazione personalizzati che intendo usare per next/prev e next/prev page. Sto utilizzando il seguente per attivare la voce successiva:Trigger prossima pagina owl carousel 2

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

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

Questo funziona bene, ma ho anche bisogno di innescare la pagina successiva (simile a come i punti di lavoro). Sembra che ci sia un'opzione slideBy che puoi usare per scorrere da una pagina, ma questo non sarà d'aiuto dato che ho bisogno sia della navigazione di oggetti che di pagine.

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

risposta

7

Si potrebbe innescare clic sui puntini:

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

Per passare alla pagina successiva o al primo se sei l'ultimo, si può fare in questo modo:

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

Si potrebbe innescare clic alla pagina successiva (slider) solo aggiungere l'opzione

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

+0

Dovrebbe essere la risposta accettata! –

0
$('#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'); 
    }    
})