Closed2022/02/05にクローズ3

スライダーのドットナビゲーションにプログレスバーを付与したい

JavaScript

Kazuki Yonemoto

やりたいこと

スライダーのドットナビゲーションにプログレスバーをつけたい。

課題

スライダープラグインにプログレスバーの機能が標準で実装されているものが見られないため、ドットナビゲーションのカスタマイズが必要

Kazuki Yonemoto

実装構成

もう少しシンプルにしたい。

jQuery
Slick.js
ProgressBar.js

切り替わったタイミングでfadeとかさせないのであれば、これでいけそう。
ただ、fadeアニメーションをつけるためにspeed が0よりも多い数値を指定する場合はラグが発生する。
fadeが始まったタイミングでプログレスバーを実行しようと思うと別途調整が必要そう。

$('.slider-box').slick({
    pauseOnHover: false,
    dots: true,
    fade: true, 
    speed: 0,
    autoplay: true,
    autoplaySpeed: 2000,
    appendDots: $('.slider-dot-box'),
    dotsClass: 'slider-dot',
});

Kazuki Yonemoto

Swiperを使ったパターンで再考してみたいな。
プログレスバーは自作するのは面倒そうなのでライブラリに頼るかな🧐
https://swiperjs.com/

このスクラップは2022/02/05にクローズされました