2015-06-13 5 views
5

Ich verwende Owl Carousel 2 und ich habe benutzerdefinierte nav-Tasten, die ich für die nächsten/vorherigen Artikel und nächste/vorherige Seite verwenden möchte. Ich verwende die folgende den nächsten Punkt zu triggern:Auslöser nächste Seite Eule Karussell 2

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

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

Das funktioniert gut, aber ich muss auch die nächste Seite (ähnlich wie die Punkte arbeiten) auszulösen. Es sieht so aus, als ob es eine slideBy-Option gibt, mit der Sie auf einer Seite gleiten können, aber das hilft nicht, da ich sowohl die Element- als auch die Seitennavigation benötige.

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

Antwort

7

Sie könnten auslösen Klicks auf die Punkte:

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

zur nächsten Seite zu gehen oder mit dem ersten, wenn Sie auf der letzten sind, können Sie es wie folgt tun:

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

Sie Klicks auf der nächsten Seite auslösen könnte (Schieberegler) nur Option hinzufügen

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

Sollte die akzeptierte Antwort sein! –

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