※社内専用

slickスライダーで、サイト表示直後に1番最後のスライド画像が少し見えてしまう

  • HOME
  • EPRESS共通
  • slickスライダーで、サイト表示直後に1番最後のスライド画像が少し見えてしまう
slickスライダーで、サイト表示直後に1番最後のスライド画像が少し見えてしまう現象を緩和する補法です。

scss

.main_visual {
  .main_visual_slick {
    li:not(:first-child) {
      img {
        opacity: 0;
        transition: opacity 1000ms ease 0s;
      }
    }

    &.slick-initialized {
      li:not(:first-child) {
        img {
          opacity: 1;
        }
      }
    }
  }
}

補足

slickが読み込まれてスライドの形状になる前に見えてしまうことがあるようで、1枚目以降はslick-initializedクラスがつくまで見えないようにしています。
slick-initializedとは、スライダーが初期化(読み込み完了)した時点で付与されるクラスだそうです。