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

a0002_011891_m

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

やろうとしたこと

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

失敗したやり方①

まず最初にやったことは、PCSP別々でスライダーを2つ用意して、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は、一度スライダーを削除して、もう1回スライドを書き出すみたいなもの。
つまり、画面サイズが変わった瞬間にスライドが1枚目に戻ってしまう。
さすがに突っ込まれるよなあってことで3つ目の方法。

成功したやり方

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

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といった感じ)
これで無事、うまくいった。

以上

コメントを残す

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。名前及びコメントは必須項目、メールアドレス及びサイトURLは任意です。