1

次のように、2.0.0b4 を使用してフクロウのカルーセルを作成し、画像を div の背景スタイルとして使用しました。

<div class="owl-carousel">
  <div class="item" style='background-image: url("http://example.com/image_1.jpg");'></div>
  <div class="item" style='background-image: url("http://example.com/image_2.jpg");'></div>
  <div class="item" style='background-image: url("http://example.com/image_3.jpg");'></div>
  ...more...
</div>

<script>
    $(document).ready(function(){
      var owl = $(".owl-carousel")
      owl.owlCarousel({
        // loop: true,
        nav: true,
        items: 4,
        responsive:{
            0:{
                items: 2,
                slideBy: 2
            },
            480:{
                items:3,
                slideBy: 3
            },
            768:{
                items:4,
                slideBy: 4
            }
        }
      })
    })
</script>

かなりうまく機能し、OC2 の応答性のすべてが正常に機能しています。唯一の問題: カルーセルをスクロールするたびに、画像がステージの空白に入り、後で背景を一度に描画するだけです. したがって、ロード時にこの醜いフラッシュが発生します(これは遅延ロードとは別だと思います)。

これは、前方にスクロールするときと、既に見た div にスクロールして戻るときの両方で発生します。あたかも div が所定の位置に配置され、すべてのアニメーションが既に発生した後にのみレンダリングされるかのようです。

アイデア?

4

1 に答える 1