slickスライダーでスマホの時のみ解除する
レスポンシブにも対応しているslickですが、スマホの時だけスライダーを解除する必要がある時はどうするのか。
‘unslick’というオプションが元々あるのですが、これはPC→スマホの切り替え時にはうまく動作しますがスマホ→PCではうまくいかず…
次の方法で対応しました。
//slider
$(‘.slider’).slick();//PC SP判別
var spW = 767;
var winW = window.innerWidth ? window.innerWidth: $(window).width();
var spFlg = false;if(winW > spW) {
spFlg = false;
} else {
spFlg = true;
}
$(window).on(‘resize load orientationchange’, function(){
winW = window.innerWidth ? window.innerWidth: $(window).width();
if(winW > spW) {
spFlg = false;
} else {
spFlg = true;
}
});$(window).on(‘load resize orientationchange’, function(){
if(spFlg === true) {$(‘.slider’).slick(“unslick”);
} else {
//roots slider
var slideRoots = $(‘.slider’);
if(slideRoots.length) {
var slideRootsFlg = false;
$(window).on(‘load resize orientationchange’,function(){
//SP表示の時はスライダー解除
if(spFlg === true) {
if(slideRootsFlg === true) {
slideRoots.slick(‘unslick’);
}
slideRootsFlg = false;
} else {
if(slideRootsFlg === false) {
slideRoots.not(‘.slick-initialized’).slick();
slideRootsFlg = true;
}
}
});
}
$(“.slider”).css(“display”,”block”);
}
});