2017-03-23 6 views
0
<div id="started-carousel"> 
     <div id="started-panel-01">1</div> 
     <div id="started-panel-02">2</div> 
     <div id="started-panel-03">3</div> 
     <div id="started-panel-04">4</div> 
</div> 
<div id="started-carousel-nav" class="flex-container"> 
     <div class="flex-item">1</div> 
     <div class="flex-item">2</div> 
     <div class="flex-item">3</div> 
     <div class="flex-item">4</div> 
</div> 

$("#started-carousel").owlCarousel({ 
     dots: false, 
     items: 1, 
     itemsDesktop: [1199, 1], 
     itemsDesktopSmall: [979, 1], 
     itemsTablet: [768, 1], 
     itemsMobile: [479, 1], 
     singleItem: !0, 
     slideSpeed: 700, 
     rewindNav: !1, 
     touchDrag: !1, 
     mouseDrag: !1, 
     afterAction: t 
    }); 
    var c = $("#started-carousel").data("owlCarousel"); 
    $("#started-carousel .next").click(function() { 
     c.next() 
    }); 
    var s = $("#started-carousel-nav > .flex-item").click(function() { 
     var t = s.index(this); 
     //c.goTo(t) 
     $("#started-carousel").owlCarousel(); 
     $("#started-carousel").trigger("to.owl.carousel", [0, 500, true]); 
    }); 

カルーセルディビジョン外に、カルーセルナビゲーションは独自のdivにあります。カスタムページネーションとスライドを正しく移動する

c.goTo()は、前述のコンソールと同じ機能ではありません。 Googleにチェックされており、ドキュメントに存在しませんでした。 to.owl.carouselで答えを見つけ、テストしました。カルーセル・ナビは不正確に動作しました。たとえば、1をクリックすると、スライド1には移動しません.2をクリックすると、1に戻ります。なぜ正しく動作しなかったのか分かりません。ヘルプを感謝します。

答えて

1

ナビゲーションを作成する必要はありません。 Owl-Carouselにはデフォルトでナビゲーションがあります。 バージョン2を使用している場合は、ここをクリックしてください:Docs & Demos

あなたが最初のバージョンを使用している場合は、ライブラリはDOM自体にナビゲーションを追加します

navigation: true 

代わりの

nav: true 

を使用する必要があります。

関連する問題