bxSliderでページャーやスライドリンクを連打した時におかしくなる問題を解決

お客様から、「スライダー(bxSlider使用)でページャーやprevボタンとかnextボタンのスライドリンクを連打したら変な動きになる!」とクレームが来ました。

連打て・・・と思いつつやってみると確かに何か挙動がおかしい。

ページャーが途中で効かなくなったり、スライドリンクしてると動きがおかしくなる。

クソ忙しい時に・・・と思いつつとにかく色々調べました。

「bxslider 連打 おかしく」とか「bxslider pager error」とか・・・半日くらいgoogleやソースとにらめっこした結果、「スライド中はイベントを切る」というものでなんとかできました。

speedのパラメータが大きいほど連打ができなくなりますが仕方ないです。以下ソース。

※cssのpointer-eventsはインライ要素には効かない点注意。

var slider = $('.slider').bxSlider({
  speed: 2000,
  pause: 4000,
  onSlideBefore: function(){
    $('.bx-controls-direction a').css('pointer-events', 'none');
    $('.bx-pager a').css('pointer-events', 'none');
  },
  onSlideAfter: function(){
    $('.bx-pager a').css('pointer-events', 'auto');
    $('.bx-controls-direction a').css('pointer-events', 'auto');
    slider.startAuto();
  }
});