bxSliderのonSlidePrevコールバックでlazy loadもどきのロジック

bxSliderを使って、lazy loadのような処理をするにあたって、onSlidePrevコールバック関数のロジックをメモとして残しておきます。

このロジックの前提は、下記図のように画面上に見えているスライドが3枚で、 三角形の左右のボタンをクリックするとどちらからに2枚ずつスライドするというものです。

こういった場合は、onSlideBeforeコールバックやonSlideAfterコールバックでやると楽なのですが、上記のような前提だとonSlideNextコールバックやonSlidePrevコールバックを使うしかありません。

onSlideNext

onSlideNextコールバックの引数に$slideElementというのがあって下記のようにすると1、2、3のようにインデックス値がとれるので、スライドする枚数分をかけるだけですので、onSlideNextコールバックの場合は非常にやり易いです。

var index = $slideElement.index();
$(elem).eq(2 * index).find("img")

onSlidePrev

onSlidePrevコールバックの引数にも$slideElementというのがあるのですが、onSlideNextコールバックの時のようにインデックス値をとろうとすると3、2、1のようにonSlideNextコールバックの時とは逆のインデックス値になります。

これを1、2、3のようにするには次のようにします。

  1. 全体の要素の数を取得
  2. maxSlidesで指定している数の倍の数を全体の要素の数から引く
  3. 最後の要素からmaxSlidesで指定している数に-1した数を2.で出した数値にnewIndexで出力される数値を引いてmoveSlidesで指定した数値を書けた数値を引く

上記の分かりにくい文をコードにすると次のようになります。

$(target).bxSlider({
  minSlides: 2,
  maxSlides: 3,
  moveSlides: 2,

  onSlidePrev: function($slideElement, oldIndex, newIndex){
  //全体の要素の数を取得
  var slideQty = elem.length;

  //6はmaxSlidesで指定した数値を倍にしたもの
  //2はmoveSlidesで指定した数値
  //-1はindexが0から始まるため
  var index = (slideQty - 6) / 2 - 1;

  //-4はクローンされたものが最後から3番目まで配置されるのでクローンされたもの除いたもの
  //※:ループを有効にすると最初と最後にmaxSlidesで指定した数のクローンが生成されます。
  //2はmoveSlidesで指定した数値
  //index - newIndexは出力される数値を逆順にするための処理
  var $lazy = $elem.eq(slideQty - 4 - ((index - newIndex) * 2)).find("img");
  var $img = $lazy.data("src");
  $lazy.attr("src",$img);
  }
});

ほぼ自分の備忘録のためですので、分かりにくいかもしれませんが、もし、同じような処理をしなければならない場合はご参考ください。