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

## 実現したいこと

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

## htmlを用意する

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

```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の公式サイト](http://kenwheeler.github.io/slick/)からファイルをダウンロードして読み込みます。jQueryも読み込みます。

```html
<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` にします。

```js
$(".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` を使用して実装します。

```css
.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` に合わせて適宜調整してください。

```css
.slider-dots {
  /* 省略 */

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

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

  to {
    width: 100%;
  }
}
```

## デモ

[デモ（CodePen）](https://codepen.io/chocolat5/pen/WNdEzeN)


slickスライダーにプログレスバーを実装する

Tags