slick でフェードスライダーを作成する

<div class="slider js-slider">
  <!-- 1つ目のスライド -->
  <div class="slideItem">
    <div class="slideItem__inner">
      <p class="slideItem__image">
        <img src="https://picsum.photos/300/200" alt="サンプル画像">
      </p>
      <div>
        <p class="slideItem__title">
          <span>1つ目のスライドです</span>
        </p>
        <div class="slideItem__text1">
          <p>1つ目のスライドです。</p>
          <p>1つ目のスライドです。</p>
        </div>
        <div class="slideItem__text2">
          <p>1つ目のスライドです。</p>
          <p>1つ目のスライドです。</p>
        </div>
      </div>
    </div>
  </div>
  <!-- 1つ目のスライド -->

  <!-- 2つ目のスライド -->
  <div class="slideItem">
    <div class="slideItem__inner">
      <p class="slideItem__image">
        <img src="https://picsum.photos/300/210" alt="サンプル画像">
      </p>
      <div>
        <p class="slideItem__title">
          <span>2つ目のスライドです</span>
        </p>
        <div class="slideItem__text1">
          <p>2つ目のスライドです。</p>
          <p>2つ目のスライドです。</p>
        </div>
        <div class="slideItem__text2">
          <p>2つ目のスライドです。</p>
          <p>2つ目のスライドです。</p>
        </div>
      </div>
    </div>
  </div>
  <!-- 2つ目のスライド -->

  <!-- 3つ目のスライド -->
  <div class="slideItem">
    <div class="slideItem__inner">
      <p class="slideItem__image">
        <img src="https://picsum.photos/300/220" alt="サンプル画像">
      </p>
      <div>
        <p class="slideItem__title">
          <span>3つ目のスライドです</span>
        </p>
        <div class="slideItem__text1">
          <p>3つ目のスライドです。</p>
          <p>3つ目のスライドです。</p>
        </div>
        <div class="slideItem__text2">
          <p>3つ目のスライドです。</p>
          <p>3つ目のスライドです。</p>
        </div>
      </div>
    </div>
  </div>
  <!-- 3つ目のスライド -->
</div>

body {
  color: #444;
  font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Arial, YuGothic, 'Yu Gothic', Osaka, Meiryo, メイリオ, sans-serif;
}

// 「←」と「→」ボタン
.slick-arrow {
  // 矢印の色
  &::before {
    color: #222;
  }
}

.slick-slide {
  opacity: 1 !important;
}

.slider {
  max-width: 600px;
  margin: 0 auto;
  padding-top: 40px;
}

.slideItem {
  &__inner {
    display: flex;
    justify-content: center;
  }

  &__image {
    margin-bottom: 32px;
    margin-right: 40px;

    // アニメーション用
    opacity: 0;
    transition: 0.3s;

    @at-root .slick-active & {
      opacity: 1;
      transition: 0.5s 0.3s;
    }
  }

  &__title {
    padding: 4px;
    margin: -4px;
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 24px;
    position: relative;

    &::before {
      background-color: currentColor;
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      content: "";

      @at-root .slick-active & {
        // アニメーション用
        animation: stretch-left-to-right 0.6s both;
        @keyframes stretch-left-to-right {
          0% {
            left: 0;
            width: 0;
          }
          50% {
            left: 0;
            width: 100%;
          }
          51% {
            left: auto;
            right: 0;
            width: 100%;
          }
          100% {
            left: auto;
            right: 0;
            width: 0;
          }
        }
      }
    }

    > span {
      // アニメーション用
      opacity: 0;
      transition: 0s 0.3s;

      @at-root .slick-active & {
        opacity: 1;
      }
    }
  }

  &__text1 {
    line-height: 1.5;

    // アニメーション用
    opacity: 0;
    transition: 0.3s;
    transform: translateY(1em);

    @at-root .slick-active & {
      opacity: 1;
      transition: 0.3s 0.3s;
      transform: translateY(0);
    }
  }

  &__text2 {
    font-size: 14px;
    margin: 16px 0;
    padding: 1em;
    line-height: 1.75;
    position: relative;
    background-color: #f4f4f4;

    // アニメーション用
    opacity: 0;
    transition: 0.3s;
    transform: translateY(1em);

    @at-root .slick-active & {
      opacity: 1;
      transition: 0.3s 0.37s;
      transform: translateY(0);
    }
  }
}

$(".js-slider").slick({
  fade: true,
  speed: 0,
  touchThreshold: 100
});