矢印を追加してフクロウカルーセルテンプレートに自動再生する

Question

owl.carousel.min.jsのテンプレートをダウンロードしました。自動再生と矢印の追加方法はわかりません。

テストサーバーには、http://testing.r2group.co.za/Test/index.htmlの途中にあります。私はHTMLに精通しているので、私はどんな助けにも感謝しますが、JSは私を超えています。 （なぜテンプレートをダウンロードしたのですか）

Answer 1

カルーセルの使い方のドキュメントはありますか？それは始めるのに良い場所です。

フクロウは私が使用しているテーマの一部です。このようなjavascriptがカルーセルの後に含まれているように見えます。

<script> 
jQuery(function($){ 
    $("#latest_news .owl-carousel").owlCarousel({ 
     lazyLoad: true, 
     responsiveRefreshRate: 50, 
     slideSpeed: 500, 
     paginationSpeed: 500, 
     scrollPerPage: true, 
     stopOnHover: true, 
     rewindNav: true, 
     rewindSpeed: 600, 
     pagination: true, 
     navigation: false, 
     autoPlay: true, 
     singleItem: true 
    }); 
}); 
</script> 

これは、ブラウザにjQueryで新しいスクリプトを開始するように指示します。

jQuery(function($){ 
    //code 
}); 

この機能の内部は、Owl Carouselに固有です。

$("latest_news .owl-carousel")は、適切な要素を選択します。これはあなた自身のCSSセレクタを使用してスライダを取得する場所です。

スライダのパラメータのjavascriptオブジェクトが渡されています。あなたの自動再生には、それを与えることができます

$("#YOUR-ELEMENT .owl-carousel").owlCarousel({ 
    autoplay: true 
}); 

矢印はこのオブジェクトの設定でも説明されています。左/右矢印は次のように追加することができるようになっていますので、

$("#YOUR-ELEMENT .owl-carousel").owlCarousel({ 
    navigationText:["<i class='icon-left-open'></i>","<i class='icon-right-open'></i>"] 
}); 

、あなたの矢印と自動再生を得るために、最低でも、あなたのスクリプトは次のようになります。

<script> 
    jQuery(function($){ 
     $("#YOUR-ELEMENT .owl-carousel").owlCarousel({ 
      autoplay: true, 
      navigationText:["<i class='icon-left-open'></i>","<i class='icon-right-open'></i>"] 
     }); 
    }); 
</script> 

それはです他のどの設定を変更してよりカスタマイズしやすくするか検討する価値があります。たとえば、slideSpeedとrewindSpeedは、javascriptでの使い慣れたプレイをするのに適しています。