slick画面読み込み時に一瞬縦並びになるバグ対応

ロード時に一瞬縦並びになるのをCSSで解決する

JSを使用せずに解決する

  $(".main-slide").slick({
    adaptiveHeight: false,
    autoplay: true,
    dots: false,
    infinite: true,
    speed: 2000,
    slidesToShow: 1,
    arrows: true,
    prevArrow: '<p class="arrow-prev" href="#"></p>',
    nextArrow: '<p class="arrow-next" href="#"></p>'
  });

<div class="main-slide">
  <div><img src="https://placehold.jp/1000x250.png" alt="slide1"></div>
  <div><img src="https://placehold.jp/1000x250.png" alt="slide2"></div>
  <div><img src="https://placehold.jp/1000x250.png" alt="slide3"></div>
</div>

このソースから出力されたhtml

<div class="slider slick-initialized slick-slider">

slick-initializedとは、スライダーが初期化（読み込み完了）した時点で付与されるclass。
これを利用して、sliderと一緒にslick-initializedが付与されているか否かでスタイルを分けることで、一瞬縦並びになってしまう状態を防ぐ

CSSでクラスが付与された時に表示させるようにする

.slider{
  display: none;
}
.slider.slick-initialized{
  display: block; /*slick-initializedが付与されたら表示*/
}

.slider{
  opacity: 0;
  transition: opacity .3s linear;
}
.slider.slick-initialized{
  opacity: 1;
}