slickプラグインで作成するスライダーに、次のスライドに切り替わるまでの進捗がわかるプログレスバーを実装する方法です。

実現したいこと

• プログレスバー付きのslickスライダーを実装する

htmlを用意する

スライドする画像を用意します。

<div class="slider">
  <img src="https://source.unsplash.com/LEpfefQf4rU" alt="" />
  <img src="https://source.unsplash.com/dQ5G0h7sLno" alt="" />
  <img src="https://source.unsplash.com/uy5t-CJuIK4" alt="" />
  <img src="https://source.unsplash.com/hQPoYovqWR0" alt="" />
</div>

slickプラグインを動作させる

slickの公式サイトからファイルをダウンロードして読み込みます。jQueryも読み込みます。

<link rel="stylesheet" href="slick.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="slick.min.js"></script>

slickのオプションで必要な設定です。次のスライドが切り替わるまでの進捗を表するため autoplay: true で自動切り替えを有効にします。
dotsの部分をプログレスバーとして使用するため dots: true と dotsClass: 'slider-dots' 、CSSのアニメーションでプログレスバーの進捗を実装するため pauseOnHover: false pauseOnFocus: false にします。

$(".slider").slick({
  pauseOnHover: false,
  slidesToShow: 1,
  slidesToScroll: 1,
  autoplay: true,
  autoplaySpeed: 5000,
  dots: true,
  arrows: false,
  dotsClass: "slider-dots",
});

CSSでプログレスバーを実装する

slickプラグインのオプションで設定したclass名 slider-dots に対してスタイルを設定していきます。

slickプラグインで生成されるdotsをバーのような見た目にしたいので、横長になるようCSSで設定します。
プログレスバーは button の :after を使用して実装します。

.slider-dots {
  width: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
  list-style: none;

  li {
    display: inline-block;
    width: calc(
      25% - 8px
    ); /* プログレスバーの横幅はスライドの枚数に合わせて調整してください */
    margin: 0 2px;
  }

  button {
    position: relative;
    width: 100%;
    height: 4px;
    border: 0;
    background-color: #ccc;
    font-size: 0;

    &:after {
      position: absolute;
      top: 0;
      left: 0;
      content: "";
      display: block;
      width: 0%;
      height: 100%;
    }
  }
}

slickでは現在表示されいてるスライドと対応するdotsに slick-active というclass名が付与されます。
slick-active が付与されている場合に、プログレスバー（ button:after ）の width が0%から100%になるようにアニメーションを作成します。

アニメーションのdurationはslickのオプション autoplaySpeed に合わせて適宜調整してください。

.slider-dots {
  /* 省略 */

  /* 追加 */
  .slick-active {
    button:after {
      background-color: #000;
      animation: progress 5.5s linear forwards;
    }
  }
}

@keyframes progress {
  from {
    width: 0%;
  }

  to {
    width: 100%;
  }
}

デモ

デモ（CodePen）