Slider Progress

スライダーの現在地表示

はじめに

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

  • 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-controlsaria-valuenowなどのARIA属性をもたせることをおすすめします。詳しくはを参考にしてください。