bxSliderの問題点と解決方法まとめ

2015/06/17

スライドアニメーションさせるためのjQueryプラグイン、「bxSlider」は導入が比較的簡単でオプションも豊富、いろんな場面で使える便利なプラグインで僕もよく使っています。ですが多少クセがあり、使っているとうまくいかない事やおかしな事がちょくちょく起こります。今までbxSliderを導入してきて、実際に起こった問題とその解決方法まとめてみます。この記事を書いているときのバージョンは「v4.1.2」です。


アニメーションがフリーズする


スライドをNext・Prevボタンやスワイプで手動操作した場合、アニメーションが固まって動かなくなってしまう場合があります。この場合はオプションに


useCSS: false

を追加するとフリーズしなくなります。ただ、CSSアニメーションのなめらかな動作ではなくなるので根本的な解決ではありません。bxSliderの問題なのか、ブラウザの問題なのかはわかりません。



スマホ表示のとき「Next・Prev」ボタンがイマイチ反応しない


スマートフォンで見た時に、スライドを手動操作する「Next・Prev」ボタンをタップしても、反応が遅かったり、何回かに一回しか反応しない場合があります。この場合は「jquery.bxslider.js」の


slider.controls.next.bind('click', clickNextBind);
slider.controls.prev.bind('click', clickPrevBind);

の部分に「touchend」のイベントを追加します。


slider.controls.next.bind('touchend click', clickNextBind);
slider.controls.prev.bind('touchend click', clickPrevBind);

こうする事で「Next・Prev」ボタンの反応がよくなりました。


縦にスワイプした時にページがスクロールできない


スマホ表示のときにデフォルトでスライドのスワイプ操作ができますが、ページを上下にスクロールさせる際に、指がスライドの部分に触れると、ページを上下にスクロールできなくなってしまいます。こんなときはオプションに


touchEnabled:false

と追加すればよいですが、これではスライドをスワイプできなくなりますので、


preventDefaultSwipeY:false

と追加すれば、縦のスワイプだけ制御されるようになります。





「Next・Prev」ボタン、ページャー、スワイプで手動操作するとアニメーションが停止してしまう


アニメーションをオートにしていた場合に、手動操作するとアニメーションが停止してしまう問題があります。「Next・Prev」ボタン、ページャーについては、「jquery.bxslider.js」の


if (slider.settings.auto) el.stopAuto();

という部分を探してコメントアウトします。全部で3カ所あります。スワイプの場合は、


var onTouchEnd = function(e){
}

という部分を探して、その中の


el.stopAuto();

をコメントアウトします。これで一通り、アニメーションが停止する事はなくなりました。


アニメーションする時に文字の色が薄くなる


スライダーを設置しているページのテキストを「position:absolute」で配置していると、スライドに合わせてテキストの色が薄くなる場合があります。「position:absolute」を使用しないか、オプションに


useCSS: false

を追加すると解決できます。前述しましたが、このオプションを追加するとアニメーションが少し粗くなります。


IE8でスライダーが動作しない


オプションの最後の行に「,」が入っているとスクリプトが動作しないので、削除します。


フェードインの時(mode:'fade')に動作しない


オプションでアニメーションのモードを「fade」にしているとき、スライダー部分を囲うhtmlタグのCSSに「overflow:hidden」が設定されているとスクリプトが動作しない場合があります。