4

jcarousel liteを使用して、自分のサイトの 1 つにブランド ロゴの自動スクロール カルーセルを表示しています。次のJavaScriptを使用して、レスポンシブ（最大ディスプレイで最大6枚の画像）にしようとしました。カルーセルは、表示される画像の数を変更しなくても、元のコードを使用して正常に動作します。

<script>

  function carouselLogic(){
    if ($(window).width() > 959 ){
      visible = 6;
      changeCarousel(visible);
    }
    else if($(window).width() > 767){
      visible = 4;
      changeCarousel(visible);
    }
    else if($(window).width() > 599){
      visible = 2;
      changeCarousel(visible);
    }
  }
  carouselLogic();

  $(window).resize(function(){
    carouselLogic();
  });
  /* original function for first page load
  $(function() {
    $(".logoCarousel").jCarouselLite({
      auto: 2500,
      speed: 1000,
      visible: 6
    });
  });
  */
  function changeCarousel(visible){
    $(".logoCarousel").jCarouselLite({
        auto: 2500,
        speed: 1000,
        visible: visible
    });
  }
</script>

画像は、左右に 20 ピクセルのマージンを持ってインラインで表示されます。

このコードは、表示されるロゴの数を変更して、レスポンシブの変更ごとにロゴがページに収まるようにすることになっています。

その結果、カルーセルの自動スクロールがすべて狂ってしまいます。あらゆる場所で前後に跳ね返り、デフォルトよりもはるかに高速です。

このコードを改善する方法について何か提案はありますか?

4

2 に答える 2

-1

これは古いですが、役立つ場合は、jcarousellite を「リセット」する必要があると確信しています。そうしないと、各ウィンドウのサイズが変更されるたびに何度もインスタンス化されます。

初期化後に適切に初期化するには、reset メソッドを呼び出す必要があります。頭のてっぺんから構文を覚えていませんが、jcarousellite.jsソースで「リセット」を検索すると、正しい構文が見つかるはずです

于 2014-07-21T18:41:31.120 に答える