# jQueryプラグイン bxSlider でスライドを再描画する

Tags: JavaScript jQuery メモ

約一か月ぶりのエントリーですが、お久しぶりです、ナガです。

前回のエントリーでもご紹介した「bxSlider」ですが、公式のオプションページには掲載されていないけど、

実案件では重宝するのではないかというメソッドを知りました。

※ npm のページには記載がありました

# はじめに

レスポンシブサイトでPC状態ではページ展開時に表示されているけど、SP時はアコーディオンの中にコンテンツが格納されている場合があるとします。

bxSlider は、初期状態が非表示だと画像を正常に描画してくれません。

そこで今回ご紹介するメソッド redrawSlider の出番になります。

bxSlider の使い方は前回のエントリー「定番のスライドショーjQueryプラグイン「bxSlider」の Callback関数まとめ」を参照してください。

# redrawSlider の使い方

次のコードは仮に初期状態が非表示のアコーディオン内にスライダーがあり、

アコーディオンを展開するボタンをクリックしたら

スライダーが表示されるという想定です。

(function($){

var slider = $('.bxslider').bxSlider(),   // bxSliderを実装
    accordion = '.js_accordion',  // アコーディオン全体を Wrap する class
    button = '.js_accordion_button',  // アコーディオンを 展開するボタンの class
    body = '.js_accordion_body';  // アコーディオン で表示させたい コンテンツを Wrap する Class (ここでは .bxSlider)

$(accordion).each(function() {
  $(this).find(button).on('click', function(event) {
    event.preventDefault();
    $button = $(this);
    $(this).parents(accordion).find(body).slideToggle(500,function(){
      slider.redrawSlider();
    });
  });
});

})(jQuery);

# 最後に

最近ではこういったスライダー系の jQueryプラグインは slick が、トレンドなのかもしれませんが、

僕はまだまだ bxSlider を現役で使ってます。

僕のように　bxSlider を今でも使ってるよという方がいれば参考にしてみてください。

ただ、 bxSlider より slick は後発のプラグインなのか、

メソッドやイベントがめちゃくちゃ豊富なようなので今度使ってみようかと思います。

# 参考サイト

bxslider（npm） ※メンテナンスをする人を募集するくらい下火になってきているようです…。