フクロウカルーセルにフェードエフェクトを適用しようとしていますが、うまくいかないようです。
このフィドルでわかるように、 http://jsfiddle.net/lav911/fHa6J/ 、 docs で言及されているtransitions.css
ファイルをロードしています。
何か不足していますか?なぜフェードではなくスライドするのですか?また、自分のサイトでもフェードが機能しないことに注意してください。
後の編集:Google Chrome 35およびFirefoxではフェードするようですが、Google Chrome 36ではスライドします。奇妙な。
プラグインのgithubリポジトリで明らかに報告されました- https://github.com/OwlFonk/OwlCarousel/issues/346
これを使用するだけで プラグインのバージョン (プルリクエスト)で修正されました。
問題は、フクロウのプラグインには、CSS変換をサポートしないブラウザーの中でIE10と11が含まれていることです。したがって、フクロウカルーセルをModernizrと組み合わせて使用し、「support3d」変数を置き換えることができます。
support3d = (asSupport !== null && asSupport.length === 1);
と
support3d = (Modernizr.csstransforms3d);
それはそれを解決するようです! :)
chromeは-webkit-transformとtransformプロパティの両方をサポートするようになったため、3dsupport検出は(変換スタイルの)返された配列が1に等しい場合にのみtrueを返すため、owlコードは失敗します。次の行を変更するだけです。
support3d = (asSupport !== null && asSupport.length === 1);
この行へ:
support3d = (asSupport !== null && asSupport.length > 0);
そして、それは動作するはずです;)
変化する
support3d = (asSupport !== null && asSupport.length == 1);
に
support3d = (asSupport !== null && asSupport.length >= 1);
更新1.3.2から、すべての遷移スタイルがメインowl.carousel.cssファイルからowl.transitions.cssに移動されました
Owl.transitions.cssを頭にリンクするか、cssにインポートします。