bxSliderでの問題解決

「bxSlider」は導入が簡単なので比較的簡単に実装が可能なので、使用されていることが多いと思います。

ですが、うまくいかないことがあったりすると解決に時間がかかったりで、複雑でわからないなんて場合に陥ることもあります。

■アニメーションがフリーズ
bx-sliderを使用していてよくある現象ですが、この場合はオプションに

useCSS: false

を追加するとフリーズすることが無くなります。

■スマートフォンでのページャーの反応が悪い
スマートフォンでのページャの反応が悪く、タップしても、スライダーが動かない場合があります。

それだと、ユーザーへのレスポンスが悪くなってしまうので、

その場合

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);

■縦にスワイプした時、スクロールできない

スライダーから縦にスワイプしようとしても、ページをスクロールできない場合があります。その場合は

preventDefaultSwipeY:false

とbxsliderのオプションに追記してあげることで、スクロールできるようになります。

実装自体は簡単ですが問題が起こった場合、時間を取られることが多いです。なので、オプションやjsの一部分を変更してあげることで、動作を安定させることができるので、対応策は持っておきたいですね。