web-dev-qa-db-ja.com

次のページのフクロウカルーセル2をトリガーします

Owl Carousel 2を使用していますが、次/前のアイテムと次/前のページに使用するカスタムナビゲーションボタンがあります。次のアイテムをトリガーするために以下を使用しています：

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

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

これは問題なく機能しますが、次のページもトリガーする必要があります（ドットの機能と同様）。ページごとにスライドするために使用できるslideByオプションがあるようですが、アイテムとページの両方のナビゲーションが必要なため、これは役に立ちません。

$('#nextPage').click(function () {
    // go to next page
});
jqueryowl-carousel
6
tqrecords

ドットのクリックをトリガーできます。

// 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();
});
8
Rudi

次のページ（スライダー）へのクリックをトリガーすることができますオプションを追加するだけです

slideBy：3 
 ..... 
レスポンシブ：{
 0：{
 items：1、
 nav：false 
}、 
 600：{
 slideBy：3、
 items：3、
 nav：true 
}、
 1000：{
 slideBy：3、//ナビゲーションをクリックする次のページをトリガーするオプション。
 items：3、
 nav：true、
 loop：true 
} 
} 
 .....
5
Web_Fer
$('#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');
    }            
})
3
Oleg