Splideスライダーの応用

INDEX

説明
自動スクロールの再生/停止
スライドに応じてスライダーの高さを可変させる
スライド関連の値をスライド外部に表示させる
ページネーション一体型プログレスバー
アクティブなスライドの番号とスライドの総数を表示する
視覚効果の低減による影響
参考

説明

Splide(v4.1.3)スライダーを応用したコードサンプルをご紹介します。
基本的な使い方は公式ドキュメントをご参照ください。

自動スクロールの再生/停止

実装例

解説

Auto Scrollエクステンションを使用したスライドに再生/停止ボタンを実装します。

autoScrollオプションにてエクステンションの設定ができます。
実装例では挙動を明示するため、pauseOnHoverとpauseOnFocusをfalseにしています。

AutoplayコンポーネントのisPaused()メソッドから再生状態を取得できるため、取得した値を元に再生状態を変更します。
play()メソッドで自動再生を開始、pause()メソッドで自動再生を停止することができます。

スライドが再生中の場合.splide__toggleに.is-activeが付与されるため、ボタンのアイコンの切り替えに使用します。

スライドに応じてスライダーの高さを可変させる

実装例

解説

表示しているスライドの高さとスライダーの高さを合わせます。

updateOnMoveをtrueにすることで、.is-activeを移動前に更新することができ、スライダーの高さを可変させるタイミングを早めることができます。

activeイベントの引数Slideは、アクティブになったSplideコンポーネントを参照します。
splide.rootからルート要素であるスライダーを取得でき、Slide.slideからアクティブになったスライダー要素を取得できます。
splide.root.style.heightへSlide.slide.offsetHeightの値を代入することで、スライダーの高さをスライドの高さにします。

スライド関連の値をスライド外部に表示させる

実装例

解説

各スライド要素に任意のデータ属性を付与することで、イベント発火時に属性の値を取得しスライド外部に表示させます。

実装例1：スライドが持つテキストをページネーションに代入する

pagination:mountedイベントの第一引数dataは、ページネーションのデータが格納されたオブジェクトを参照します。
data.itemsは、ページネーションのボタン要素を格納した配列を参照します。
splide.Components.Elements.slidesは、スライド要素を格納した配列を参照します。
ボタン要素のindexとスライド要素のindexが一致する要素の[data-name]の値を取得し、ボタンのテキストに代入します。

実装例2：スライドが持つテキストとカラーを特定の要素に代入する

activeイベントの引数Slide.slideから、アクティブなスライド要素に付与されているデータ属性の値を取得し、特定の要素（#js-splide-panel）に付与します。

ページネーション一体型プログレスバー

実装例

解説

ページネーションに自動再生の経過時間を表示します。

resetProgressをfalseにすることで、自動再生の経過時間をリセットせずに継続します。
autoplay:playingイベントの引数rateは、自動再生の経過時間を0から1の範囲で表します。
ページネーション要素を取得し、style.setPropertyで--playing-rateにrate * 100%の値を代入します。

アクティブなスライドに紐づく.splide__pagination__pageには.is-activeが付与されます。
.splide__pagination__page.is-activeの::afterのwidthに--playing-rateを適用することで、経過時間を表示します。

アクティブなスライドの番号とスライドの総数を表示する

実装例

解説

indexやlengthの取得が簡単なエクステンションを用いて、アクティブなスライドのindexとスライドの総数を代入します。
エクステンションの第一引数のSplideはSplideのインスタンスを参照します。
mount()関数はコンポーネントがマウントされた時に実行されます。
Splide.indexでアクティブなスライドのindexを、Splide.lengthでスライドの総数を取得できます。
update()関数でアクティブなスライドのindexを更新します。
Splide.on()からmoveイベントを登録し、スライダーが動く直前にupdate()を実行します。