説明
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()を実行します。
視覚効果の低減による影響
実装例
解説
Splideはprefers-reduced-motion: reduceを検出するとアニメーションを制限します。
speedとrewindSpeedを0で上書きますautoplayをpausedで上書き、再生ボタンを押さない限り自動再生が行われないように変更します
ドラッグやスワイプ後のトランジション以外のアニメーションは全て無効になります。reducedMotionオプションから設定を上書きすることができますが、ユーザーが意図して視覚効果を低減させていることをお忘れなく。
