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

製作 プログラム

最終更新日:2021/04/17

ラムネグから一言:寝る前に読むとくだらなすぎて逆に寝れると好評なすごい適当なブログをこっちではじめてます.

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

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

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

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

解決方法

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

cssにこれを追加

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

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

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

にしてくださいね。

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

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

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

もっとおしゃれに

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

cssにこれを追加

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

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

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

ちなみに

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

対策するなら、

HTMLのhead内にこれを追加

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

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

まとめ

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

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

【おしらせ、というか完全なる宣伝】

文体がもうぜんぜん適当すぎてあれだけどものすごい自由に書いてるブログ「檸檬だくだく」もよろしく.寝る前に読める恐ろしくくだらないやつです.

こんなにも一ミリも目を引かれないタイトルを取り扱ってます: アジアという語感 / 精神的食パン限界値 / 続・マーガリン問題 /