【bxslider】一括で設定したスライドをタブ切り替えのたびに再読み込みする方法

何かと便利なbxsliderですが、タブ切り替えやポップアップなど、表示、非表示が絡むと、スライドが動かなくなったり、画像が表示されなくなってしまうため、「パブリックメソッド」である「reloadSlider」や「redrawSlider」を実行する必要があります。

一つや二つであれば以下の様に個別に設定すれば解決できます。

$(document).ready(function(){
  var slider = $('.bxslider').bxSlider({
            auto: true,
            autoHover:true,
            pager:false,
            pagerType:'full'
  });
  (".tabselector a").click(function(){
            slider.reloadSlider();
  });
});

 

しかし、10個単位でスライダーがある場合に、一つ一つ設定して行くのは辛い・・・。
なにかやりようがないかと調べたところ、素敵な解決方法を載せているサイトがありました。

なんかいろいろデザインする人

[adsense]

こちらのサイトを参考に修正したのか下記のソースです。

 

$(document).ready(function(){
  var config = {
            auto: true,
            autoHover:true,
            pager:true,
            pagerType:'full'
  };
  var sliders = new Array();
  $('.bxslider').each(function(i, slider) {
            sliders[i] = $(slider).bxSlider(config);
  });

  $(".tabselector a").click(function(){
            $.each(sliders, function(i, slider) { 
                  slider.reloadSlider(config);
            });
  });
});