bxsliderのクリックした時にリロードするのを作った時の話

スライダー系のjsの中でも使いやすくて有名なbxslider.js
その中で幾つかオプションがあるんだけど、複数スライドがある時にそれがうまくいかなかった時のあれこれ。
なんか日本語でこれ書いてるところ見つけられなかったから次やる時のメモ。
※2016年11月29日修正・追記しました。適当に書いたのに結構アクセスくるから。

はじめに

bxslider.jsにはdestroySliderとかreloadSliderとかの機能がある。
destroySliderはスライダー削除するやでってやつ。まんま。
reloadSliderはスライドをページ読み込んで最初に表示される状態にすること。
reloadSliderの内部処理的にはdestroySliderした上で再形成している。
で、いろいろ見よう見まねで最初こんな感じにした。

$(window).load(function() {
  var slider = $('.bxslider').bxSlider({
    slideWidth: 600,
    minSlides: 1,
    maxSlides: 1,
  });
  $('.reloadbtn').on('click','function(){
    slider.reloadSlider();
  });
});

基本はこれでOK。スライドが１枚の人はこれで大丈夫のはず。
ただし、同じクラスで複数スライドがある時にこれをすると開発者ツールに
slider.reloadSlider is not a function
って出てしまう。なんてこった。
んでもってあーだこーだし始めていった。

修正後

そしてできたものがこちらになります。

$(window).load(function() {
  var config = {
    slideWidth: 600,
    minSlides: 1,
    maxSlides: 1,
  };
  var sliders = new Array();
  $('.bxslider').each(function(i, slider) {
    sliders[i] = $(slider).bxSlider(config);
  });
  $('.reloadbtn').bind('click',function(){
    $.each(sliders, function(i, slider) { 
      slider.reloadSlider(config);
    });
  });
});

解説

var config = {
  slideWidth: 600,
  minSlides: 1,
  maxSlides: 1,
};

まず、オプションを変数に。ここでは変数名はconfigにしてるけど、わかりやすいのに変えて大丈夫。
この中には、複数のスライドで使っている共通のオプションを格納する。

var sliders = new Array();

ここで一度配列を作る。変数名はご自由に。
この配列にスライドを１つずつ入れていくイメージ。

$('.bxslider').each(function(i, slider) {
  sliders[i] = $(slider).bxSlider(config);
});

eachは繰り返し処理。
配列に１つずつスライダーを入れていく。

$('.reloadbtn').bind('click',function(){
  $.each(sliders, function(i, slider) { 
    slider.reloadSlider(config);
  });
});

クラス名reloadbtnをクリックしたら、繰り返し処理で配列に入ったスライド１つ１つをリロードしていく。
いえーいできたー！Fooooo！終わりー！

参考URL
http://jsfiddle.net/G8Laq/27/