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

<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>

.my-carousel-progress {
  background: #ccc;
}

.my-carousel-progress-bar {
  background: greenyellow;
  height: 2px;
  transition: width 400ms ease;
  width: 0;
}
CSS

.my-carousel-progress {
  background: #ccc;
}


.my-carousel-progress-bar {
  background: greenyellow;
  height: 2px;
  transition: width 400ms ease;
  width: 0;
}

トランジションの時間は、スライダーのスピード(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

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();

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

補足

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

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

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