slickスライダーがスクロールでちらつく！の解決方法

slickスライダー、めっちゃ便利ですよね。

でも今回slickで全画面スライダーを作ってみたところスマホのスクロールでめちゃめちゃ画像がちらつくし、なんか急に一ドンッと一瞬大きく膨れたりしてどうにもブサイク…。カッコいいハズのslickスライダーがダサい。

ということでこのslickスライダーがスクロール時ちらついちゃう問題の解決方法を紹介したい。

 

スライダーの高さを固定

たぶんなんですがスマホスクロール時にslickスライダーがちらついたり、画像が一瞬大きくなるケースって、スライダー自体の高さが可変になってる場合だと思います。

例えば、

 

• height:100%
• height:100vh

 

みたいな画面の高さに依存するような高さの取り方。100じゃなくても同じ。例えば画面半分のスライダーにしよ！で50vhでも関係なくちらつきます。

なのでとりあえずスライダーの高さを画面の高さ依存で設定するのをやめましょう。slickスライダーと相性が悪いです。

slickスライダーがスマホスクロールでちらつくのってcssで%やvhで高さ設定しちゃってて、スクロールのたびに微妙にスライダー本体の高さが変わっているのが原因なんです。スマホの場合、%やvhでとれる値がスクロールで変わるんです（スクロールでアドレスバーが引っ込んだりして値が変わる）。

なのでたぶんslickだけでなくほぼすべてのスライダー系プラグインはスライダーのサイズを「%」や「vh」で設定するとちらつきます。

よそ様のサイトでいくつか試しましたがスライダーの高さが画面依存になってるサイト様でぜんぶ発生していました。試した範囲では、ですが。

 

でも全画面にしたい！

いやそうはいっても私（ぼく）は全画面スライダーをでかでかと表示したい！だっていちばんおしゃれじゃん！という方。そうですよね、コードで相性が悪いからってデザイン妥協するのはなんかヤですよね。

ということでslickスライダーのちらつきを解決したうえで全画面スライダーにする方法を。

 

javascriptで高さを設定する

はい、困ったときはみんな大好きjavascriptです。

ぼくは基本的にcssで何でもやりたい派で、それでもにっちもさっちもいかない時だけjavascriptを使うようにしています。javascriptは何でもできるぶん、あんまり頼りすぎるとほかが伸びないというか、ぜんぶjavascriptでやればいいじゃん！になっちゃいがちなんで、ちょっとセーブしたいというか。

 

はい、どうでもいいですね。

slickスライダーがスマホスクロールでちらつくのってcssで%やvhで高さ設定しちゃってて、スクロールのたびに微妙にスライダー本体の高さが変わっているのが原因でしたよね。

なのでもう一番最初にslickスライダーに「あなたの高さはこれ！」と画面サイズをパッとjavascriptで渡しちゃう。こんな感じ。これをloadの中でやればOK。

 

javascript（jquery）

$(function(){
	var ua = navigator.userAgent;
	if((ua.indexOf('iPhone')>0 || ua.indexOf('Android')>0)
		&&ua.indexOf('Mobile')>0){
		$('#my-slider').outerHeight( $(window).height() );
	}else if(ua.indexOf('iPad')>0 || ua.indexOf('Android')>0){
		$('#my-slider').outerHeight( $(window).height() );
	}
});

パソコンの時はvhでも%でもslickがちらつくことはない（vhや%の値が途中で変わらない）ので、条件から外して、スマホの時、それからタブレットの時にスライダーの高さをウィンドウの高さに設定しています。

見本ではjquery使っちゃってますが、jqueryの機能を利用しているのはmy-sliderに高さ設定してる所だけ。

その周りの「ua」ほにゃららのスマホとタブレットを判定してる所は純粋なjavascriptなのでそのまま使ってもらえます。

 

とりあえずこれでスライダーの高さが初期の画面サイズ固定値に設定されますので、その後スマホのスクロールで%やvhの値が変わったとしてもスライダーの高さは固定値。ちらつくことはなくなります。

上のやり方はとてもシンプルで、例えばスマホを縦持ちから横持ちに変えるのには対応していません。やる場合はもう少し長くなります。

 

まとめ

全画面表示のslickスライダーがスマホのスクロール時にちらつく、一瞬びくっと大きくなる、というバグの解決方法を紹介しました。

結局スライダーの高さに%やvhを使ってるのが原因。スマホでは%やvhの値がスクロールで変わっちゃうようなのです。それはスクロールでアドレスバーが勝手に開閉されるのが一因。

なので全画面スライダーをslickで実現したい場合は、スマホやタブレットの時はjavascriptで画面の高さを取得して固定値として設定してやれば、ちらつきが解決します。

slickスライダー、ひいてはすべてのスライダープラグインの画像ちらつきでお困りの方、お試しくださいね。

おすすめ記事.