bxSliderでmode:fadeが効かない

カスタマイズがしやすくて、設置も簡単で言うことなしの万能スライダーbxSlider。
大好きすぎてスライダー実装する制作では8割がたこのスライダーを使用しています。
メインビジュアルだけでなく、スライド系のところはもう全部これ。

http://bxslider.com/

そんな大好きなbxSliderでフェードモードが効かないという状況に陥り、ググってもダメで、いろいろやってみて解決したのでメモ。

fade:’mode’が効かない

「mode:’fade’」とオプション指定すると、横スライドではなくフェード切り替えになるはずなのですが、
なぜか画像が出ない。一枚も。

「mode:’horizontal’」とか「mode:’vertical’」は問題ないのに。なぜ・・・

解決:overflowが問題でした。

ulにoverflow:hiddenしていたことが原因でした。。
フロートするリストが多くて、フロートクリア用に全部まとめてul{overflow:hidden}ってな感じで指定しちゃってたのがまずかった。

設定を解除するか、bxSliderを使うulだけ「overflow:visible;」に設定すればOK。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>