2016-04-06 5 views
0

私はフクロウカルーセル2プラグインを使用して、私はスライド(矢印ボックス)内に含まれるナビゲーションボタンを持つようにしたいと私はフクロウカルーセル2ナビゲーション

私のhtmlをナビゲートするための「PREV」と「次」の矢印を使用したいです

  <div class="arrow-box"> 
       <a href="#" class="prev"><i class="fa fa-angle-left"></i></a> 
       <a href="#" class="next"><i class="fa fa-angle-right"></i></a> 
      </div> 

      <div id="owl-demo" class="owl-carousel"> 
       <div class="item news-post"> 
        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse 
        cillum dolore eu fugiat nulla pariatur.</p> 
       </div> 
       <div class="item news-post"> 
        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse 
        cillum dolore eu fugiat nulla pariatur.</p> 
       </div> 

       <div class="item news-post"> 
        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse 
        cillum dolore eu fugiat nulla pariatur.</p> 
       </div> 
      </div> 

そして、私は、これは

var owl = $("#owl-demo").owlCarousel({ 
     loop:true, 
     margin:10, 
     responsiveClass:true, 
     responsive:{ 
      0:{ 
       items:1, 
       nav:true 
      }, 
      1000:{ 
       items:2, 
       nav:true, 
       loop:true 
      } 
     } 
    }); 
    owl = $('#owl-demo').owlCarousel(); 
    $(".arrow-box .next").click(function() { 
     owl.trigger('next.owl.carousel'); 
    }); 

    $(".arrow-box .prev").click(function() { 
     owl.trigger('prev.owl.carousel'); 
    }); 
+0

だから、問題は何ですか?あなたの質問は何ですか? – Rob

答えて

1

私はあなたがowl 2つの宣言、var owl = $("#owl-demo").owlCarousel({とを作っている、問題があると考えているJSを使用

2番目の宣言を削除します。

変更owl.trigger('next.owl.carousel');owl.trigger('prev.owl.carousel');~owl.trigger('owl.next');owl.trigger('owl.prev');をそれぞれ変更します。

ワーキングフィドル:http://jsfiddle.net/p3d52z4n/187/

関連する問題