WEBMAN

HTML,CSS,JSでハマった事のメモとWEB制作の実験場

更新日: / 公開日:

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

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

SPONSOR

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

前回のエントリーでもご紹介した「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);

下記は redrawSlider を使用した場合と使用しない場合を比較した DEMO です。

redrawSlider DEMOO

最後に

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

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

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

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

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

参考サイト

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

SPONSOR

この記事をシェアする

コメント

関連記事