bxSliderで画像がちらつく問題の対処法を解説！
bxSliderで画像がちらつく問題の対処法を解説します。特にbxSliderでオプションを用いた際に画像がちらついてしまいます。しかしこの問題はあることに留意すると簡単に解決できます。ここではこの問題の対処法をサンプルコード付きで解説します。
bxSliderで画像がちらつく問題
特にbxSliderのオプションを用いると、bxSliderで画像がちらつく問題が頻繁に
起こりえます。
またbxSliderのclass名をbxsliderにしていないとちらつきます。
bxsliderのオプションでmode:fadeとし、ちらつく場合のサンプルコードを用意したので、見てみましょう。
このようにbxSliderで1枚目の画像から2枚目の画像にフェードしてループ際に、一瞬3枚目の画像がちらついていることが分かります。
ではこのサンプルコードを元に以下の項目で対処する方法について解説します。
bxSliderで画像がちらつく問題の対処法
ではbxSliderで画像がちらつく問題の対処法について解説します。
classをbxsliderとする
class属性をbxsliderとするだけで、私の環境ではちらつきが無くなりました。
では実際にサンプルコードを用いて挙動を確認してみましょう。
このように1つ目のサンプルコードで見られたちらつきが無くなっていることが分かります。
このことからbxSliderを用いる際は、class属性はbxsliderとすることを心掛けましょう。
mode:verticalの際の画像のちらつき
mode:varticalとした際に、CSSで何も設定していないと、上部に他の画像がちらついてしまいます。
では対処したサンプルコードを用意したので、挙動を確認してみましょう。
このように.sliderに対して、
mode:verticalに対する対処
ul.slider {
padding: 0; /* または padding-left: 0; */
margin: 0;
}のように設定するだけで、上部に他の画像がちらつくという問題は解決します。
またul要素のclass属性をbxsliderとすると、CSSの設定なしでも画像はちらつきません。
useCSS:falseとする
私の環境では起こらなかったのですが、導入にあたりループ時に、１枚目の画像がちらつく（一瞬、画像の半分が白くなる）現象が発生することがあるみたいです。
そんな時の対処法として、bxSliderのオプションであるuseCSS:falseとすることが挙げられます。
では実際にサンプルコードを用いて挙動を確認してみましょう。
このように画像のちらつきがないことが分かります。
useCSSによって使えるオプション
useCSSをfalseにしてしまうとbxSliderの一部のオプションがつかえなくなります。
では逆にuseCSSをtrueにすることで、使えるオプションを紹介します。
そのオプションとはeasingオプションの'linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out', 'cubic-bezier(n,n,n,n)'となります。
まとめ
いかがでしたでしょうか？
私の環境ではclass属性をbxsliderにすることで、今まで困らされていた画像のちらつき問題が一気に解消されました。
ですので、ぜひbxSliderを用いる際はclass属性をbxsliderにして用いてください。
