tips blog

Slick.jsで画像が切り替わっているとき画像がカクっと動く

2019年4月5日

■症状
・Slick.jsで画像が切り替わっているとき画像がカクっと動く

■原因
横幅がスクロールバー分大きく判断
スライド中にリサイズ処理、横幅がスクロールバー分縮む。
なぜそうなるかは不明
【追記】Slickの設定が早すぎるため、縦スクロールが出る前に横幅を計測し、1枚目が動いており、2枚目途中で、縦スクロールが出ている事を判断し、幅が変わっていると思われる

■解消法
画像読み込み後、Slickスライダーのタイミングを0.3秒程度遅らせる。

$(window).on('load',function()
{setTimeout(function(){
$('#mv ul').slick();
},30);
});

※一時的な解決で、縦スクロールが出るタイミングがどの段階で行われるのか調べて、その後にSlickの設定を行う必要がある。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です