Carousel Progress

スライダーの現在地表示

はじめに

このチュートリアルでは、下の例のような、現在地をバーで表示する方法を解説します。

HTMLとCSS

まず、バー自体をHTMLとCSSで実装します。

<section class="splide" aria-label="...">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide">Slide 01</li>
...
</ul>
</div>
<!-- 現在地表示用のバーを実装 -->
<div class="my-carousel-progress">
<div class="my-carousel-progress-bar"></div>
</div>
</section>
HTML
.my-carousel-progress {
background: #ccc;
}
.my-carousel-progress-bar {
background: greenyellow;
height: 2px;
transition: width 400ms ease;
width: 0;
}
CSS

トランジションの時間は、スライダーのスピード(options.speed)と一致させると一体感が生まれます。

スクリプトによる制御

「いま全体のどのあたりにいるのか」を表す割合は、現在のインデックスと終わりのインデックスから( current + 1 ) / ( end + 1 )として計算できます。現在のインデックスはSplide#indexから、終わりのインデックスはController#getEnd()から得られます。

これらの値を利用して、スライダーが動くたびにバーの幅を更新する処理を書いてみましょう。

var splide = new Splide( '.splide' );
var bar = splide.root.querySelector( '.my-carousel-progress-bar' );
// Splideの初期化が終わった際、またはスライドが切り替わる際にバーの長さを更新する
splide.on( 'mounted move', function () {
var end = splide.Components.Controller.getEnd() + 1;
var rate = Math.min( ( splide.index + 1 ) / end, 1 );
bar.style.width = String( 100 * rate ) + '%';
} );
splide.mount();
JavaScript

スライダーがロードされた直後にも幅を更新するため、上の例ではmountedイベントが配信された際にも更新処理を走らせました。

補足

あと少し処理を加えることで、クリック可能なバーを作成できます。

  • クリックされた場所とバーの全長をもとに、インデックスを逆算する
  • スライダーをSplide#go()で移動させる

ただしこの場合はアクセシビリティの観点から、aria-controlsaria-valuenowなどのARIA属性をもたせることをおすすめします。詳しくはこのドキュメントを参考にしてください。