chocolat

tips_javascript

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

April 01, 2022

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: truedotsClass: '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%;
  }
}

デモ