こんにちは。

佐藤です。

僕の書いた記事で一番人気の高いのが

以前書いた、「bxSliderのスライド内のリンクが効かなくなった際の対処方」

ただ内容が応急処置的な感じになっているので「完全版」をお届けします。

まず、前記事に対処方が①と②の二種類載っていますが

①の存在は忘れましょう。

対処は②一択です！

対処②の内容を軽くおさらいすると

bxSliderのオプションの「touchEnabled」を「false」にするというもの。

というかリンクがなくても「touchEnabled」は基本「false」を推奨します。

というのも、「touchEnabled」を「true」にするとスマホで上下にスクロールしようとした際、スライド上をスワイプしてスクロールしようとするとスクロール出来ないことが多々あるためです。

それでもスワイプでスライドの切り替えがしたい！

って時はjQueryで切り替え処理を追加しちゃいましょう。

例えばこんな感じ

var $bxList = $('.bx-list');//スライドの対象
if ($bxList.length) {
  var mySlider = $bxList.bxSlider({
    auto: true,
    touchEnabled: false,
  }),
    $bxViewport = $bxList.closest('.bx-viewport'), posX, moveX;

  //スワイプ開始
  $bxViewport.on('touchstart', function (e) {
    posX = e.originalEvent.touches[0].pageX;
    moveX = posX;
  });

  //スワイプ中
  $bxViewport.on('touchmove', function (e) {
    moveX = e.originalEvent.touches[0].pageX;
  });

  //スワイプ完了
  $bxViewport.on('touchend', slide_action);

  function slide_action() {
    var diff = posX - moveX;
    
    if (Math.abs(diff) > 80) { //80px以上スワイプしていれば
      if (diff > 0) { //－値は右スワイプ
        mySlider.goToNextSlide();
      } else {
        mySlider.goToPrevSlide();
      }
    }
  }

}

これだけで一応切り替え処理は完了です。

もしドラッグにも対応したいよ！

って場合はドラッグの処理を追加するだけ、ただ値の取り方が少し違うので注意。

var $bxList = $('.bx-list');
if ($bxList.length) {
  var mySlider = $bxList.bxSlider({
    auto: true,
    touchEnabled: false,
  }),
    $bxViewport = $bxList.closest('.bx-viewport'), posX, moveX;


  //ドラッグ開始
  $bxViewport.on('dragstart', function (e) {
    posX = e.clientX;
    moveX = posX;
  });

  //ドラッグ完了
  $bxViewport.on('dragend', function (e) {
    moveX = e.clientX;
    slide_action();
  });

  //スワイプ開始
  $bxViewport.on('touchstart', function (e) {
    posX = e.originalEvent.touches[0].pageX;
    moveX = posX;
  });

  //スワイプ中
  $bxViewport.on('touchmove', function (e) {
    moveX = e.originalEvent.touches[0].pageX;
  });

  //スワイプ完了
  $bxViewport.on('touchend', slide_action);

  function slide_action() {
    var diff = posX - moveX;
 
    if (Math.abs(diff) > 80) { //80px以上スワイプしていれば
      if (diff > 0) { //－値は右スワイプ
        mySlider.goToNextSlide();
      } else {
        mySlider.goToPrevSlide();
      }
    }
  }

}

スワイプ中にスライドを引っ張る様なモーションが欲しい場合は「$bxViewport.on(‘touchmove’,function (e) {})」の中に処理を書いてやれば実現できます。

自分好みのスライダーにカスタマイズしてみるのも面白いかもしれませんね。