web-dev-qa-db-ja.com

フクロウカルーセルフェードエフェクトが機能しない

フクロウカルーセルにフェードエフェクトを適用しようとしていますが、うまくいかないようです。

このフィドルでわかるように、 http://jsfiddle.net/lav911/fHa6J/ 、 docs で言及されているtransitions.cssファイルをロードしています。

何か不足していますか？なぜフェードではなくスライドするのですか？また、自分のサイトでもフェードが機能しないことに注意してください。

後の編集：Google Chrome 35およびFirefoxではフェードするようですが、Google Chrome 36ではスライドします。奇妙な。

javascriptjqueryowl-carousel
14
Zubzob

プラグインのgithubリポジトリで明らかに報告されました- https://github.com/OwlFonk/OwlCarousel/issues/346

これを使用するだけで プラグインのバージョン （プルリクエスト）で修正されました。

14
Zubzob

問題は、フクロウのプラグインには、CSS変換をサポートしないブラウザーの中でIE10と11が含まれていることです。したがって、フクロウカルーセルをModernizrと組み合わせて使用​​し、「support3d」変数を置き換えることができます。

support3d = (asSupport !== null && asSupport.length === 1);

と

support3d = (Modernizr.csstransforms3d);

それはそれを解決するようです！ :)

8
Tomer Almog

chromeは-webkit-transformとtransformプロパティの両方をサポートするようになったため、3dsupport検出は（変換スタイルの）返された配列が1に等しい場合にのみtrueを返すため、owlコードは失敗します。次の行を変更するだけです。

support3d = (asSupport !== null && asSupport.length === 1);

この行へ：

support3d = (asSupport !== null && asSupport.length > 0);

そして、それは動作するはずです;）

5
Michael Falck Wedelgård

変化する

support3d = (asSupport !== null && asSupport.length == 1);

に

support3d = (asSupport !== null && asSupport.length >= 1);

https://github.com/OwlFonk/OwlCarousel/issues/515

3
rttmax

更新1.3.2から、すべての遷移スタイルがメインowl.carousel.cssファイルからowl.transitions.cssに移動されました

Owl.transitions.cssを頭にリンクするか、cssにインポートします。

1
colormono