bxsliderのレスポンシブについて

レスポンシブサイトで勉強する機会があったからその時のメモ。

やろうとしたこと

簡単にいうと、レスポンシブサイトで、640pxをブレイクポイントにPCとSPでスライドする画像を変えたいということ。
横幅641pxまではPC用の画像、640px以下はSP用の画像をスライドさせる。
bxsliderにはデフォルトで、スライダーの横幅を100%として自動調整してくれる機能はあるんだけど、画像切り替えは自分でやる必要がある(当たり前だけど)。

失敗したやり方①

まず最初にやったことは、PCSP別々でスライダーを２つ用意して、CSSのmediaqueryでdisplay:noneを切り替えていく方法。

@media screen and (min-width: 641px) {
	.slider_sp {
		display: none;
	}
}
@media screen and (max-width: 640px) {
	.slider_pc {
		display: none;
	}
}

これでいけるんじゃねって思ってんだけど、display:noneのスライダーが普通にバグる。
なんていうか、display:noneになった瞬間に固まるみたいな現象。
まあ、ぶっちゃけ失敗するだろうなーと思って組んだとこあるけど、案の定って感じ。
ふーむなるほど。ということで次。

失敗したやり方②

じゃあsliderを再読み込み・・・つまりreloadすればいいんじゃね？ってなってこうしてみた。

$(function() {
	var slider = $(".slider_pc").bxSlider({
        adaptiveHeight: true
	});
	$(window).on("resize",function(){
		slider.reloadSlider();
	});
}

よっしゃこれで正常にって思ったけど、これはこれで問題が発生。
reloadSliderは、一度スライダーを削除して、もう１回スライドを書き出すみたいなもの。
つまり、画面サイズが変わった瞬間にスライドが１枚目に戻ってしまう。
さすがに突っ込まれるよなあってことで３つ目の方法。

成功したやり方

まあ、要するに画像を書き換えてしまおうってやり方。

var win_w;
$(window).on("resize load",function() {
    win_w = $(window).width();
    if( win_w < 640 ){
		$(".img_change").each(function(){
			$(this).attr("src",$(this).attr("src").replace('_pc', '_sp'));
		});
    }
});

ロードした時とリサイズした時にスライドさせる画像にimg_changeというクラスを置いて、PC版の画像には_pcを、SP版の画像には_spを後ろにつける。
（slider_01_pc.jpg、slider_01_sp.jpgといった感じ）
これで無事、うまくいった。

以上