2017-08-15 7 views
0

私は自分のウェブサイトにowlスライダを実装しようとしていますが、うまくいきますが、唯一の問題はowlスライダがデフォルトで1つのスライドに5つのアイテムを表示することですスライド1つにつき5の代わりに3つのアイテムを表示させてください。5の代わりにOwl Sliderの3つのアイテムを表示する方法

私は公式サイトで入手可能な以下のコードを追加しようとしましたが、修正の方法を教えてください。

jQuery(document).ready(function(){ 
jQuery('.owl-demo').owlCarousel({ 
margin: 0, 
responsiveClass: true, 
smartSpeed: 500, 
dots: ($(".owl-carousel .item").length > 1) ? true: false, 
loop:($(".owl-carousel .item").length > 1) ? true: false, 
responsive: { 
    0: { 
     items: 1, 
    }, 
    1140: { 
     items: 3, 
    }, 
    1110: { 
     items: 3, 
    } 
    } 
}) 

おかげ

答えて

0

私は同様の問題を持っている、と私の問題は以下の通りです:

  1. 私は動的なCSSスタイルファイルをインポートします。
  2. ドキュメントの準備ができたら、動的ファイルは読み込まれませんが、owlは読み込まれます。
  3. そして、ダイナミックファイルがロードされました。これで、ダイナミックファイルのいくつかのスタイルは、owl-carouselコンテナのサイズを変更しましたが、現在、owlの応答はトリガされません。

すべてのスタイルが準備完了したら、初期化する必要があります。

window.addEventListener("load", function() { 
    jQuery('.owl-demo').owlCarousel({ 
     margin: 0, 
     responsiveClass: true, 
     smartSpeed: 500, 
     dots: ($(".owl-carousel .item").length > 1) ? true : false, 
     loop: ($(".owl-carousel .item").length > 1) ? true : false, 
     responsive: { 
      0: { 
       items: 1, 
      }, 
      1140: { 
       items: 3, 
      }, 
      1110: { 
       items: 3, 
      } 
     } 
    }, false); 

別wordaroundは以下の通りです:

setTimeout(function() { 
    $('.owl-carousel').trigger('refresh.owl.carousel'); 
}, 500); 
関連する問題