English

Slider Progress

スライダーの現在地表示

v3用のドキュメントを参照しています

はじめに

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

  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09

HTMLとCSS

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

<div class="splide">
 <div class="splide__track">
 <ul class="splide__list">
 <li class="splide__slide">Slide 01</li>
 ...
 </ul>
 </div>
 
 <!-- 現在地表示用のバーを実装 -->
 <div class="my-slider-progress">
 <div class="my-slider-progress-bar"></div>
 </div>
</div>
HTML
.my-slider-progress {
 background: #ccc;
}
 
.my-slider-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-slider-progress-bar' );
 
// バーの幅を更新する
splide.on( 'mounted move', function () {
 var end = splide.Components.Controller.getEnd() + 1;
 bar.style.width = String( 100 * ( splide.index + 1 ) / end ) + '%';
} );
 
splide.mount();
JavaScript

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

補足

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

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

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