slickスライダーが最初縦並びになっちゃう見た目の治し方

ウェブページにスライダーを入れようとするとたぶんなんかのプラグインというかもう出来上がってるスライダープログラムを使うと思います。slickとかswiperとかそういうの。

そしてslickを使ったとき、一番最初、スライダーの準備が整うまではスライダーの内容物が縦並びになっちゃうんですよね。

ここではslickスライダーの縦並び問題をCSSのみで解決しよう、というのを書きます。

1. 解決方法
2. もっとおしゃれに
3. ちなみに
4. まとめ

解決方法

いきなり解決方法から。CSSだけでOK！

#○○{
display: none;
}
#○○.slick-initialized{
display: block;
}

「#○○」の部分はあなたがjavascriptでslickを設定したオブジェクト名

$('#○○').slick({});

にしてくださいね。

「.slick-initialized」てなんやねん、て話ですがslickはスライダーの準備ができる、つまり縦並びが解消されると「.slick-initialized」というクラスを付与してくれるんです。

なのでこっちとしてはcssで「.slick-initialized」が付与されるまでは表示しない（display:none）しておいて、「.slick-initialized」が付与されて縦並びがなくなったなら表示する（display:block）する。という感じ。

めっちゃシンプルですね。

もっとおしゃれに

次いでなんでslickスライダーをちょっとおしゃれに表示してみましょう。

#○○{
opacity: 0;
transition: opacity 0.3s ease;
}
#○○.slick-initialized{
opacity: 1;
}

これでふわっと表示されます。

…まあ結局「.slick-initialized」がつくまでは表示させなくして、「.slick-initialized」がついたタイミングでなんかしてるだけなんですよね。シンプルです。

ちなみに

ちなみにスライダーはjavascriptを使って動いているのでjavascriptが無効になってるブラウザで見るとスライダーは動きません。さらに今回の方法だと「.slick-initialized」が付与されなくなるんでずーっとスライダーの内容物が表示されない事態に。

対策するなら、

<noscript>
<style>
#○○{
display: block;
}
</style>
</noscript>

とnoscriptでjavascriptが無効のときは表示してね！と数行追加しておきましょう。

まとめ

slickスライダーで最初縦並びになっちゃう問題の治し方を紹介しました。

cssだけで簡単に解決するのでぜひ試してみてくださいね。