次のように、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 が所定の位置に配置され、すべてのアニメーションが既に発生した後にのみレンダリングされるかのようです。
アイデア?