Splideを使えば、スライダーの自動再生や自動無限スクロールが簡単に実装できます。その際、スライダーがビューポートの外に出た際の処理まで考慮して実装できていますか？この記事では、その理由と実装方法を解説していきます。
autoplayおよび自動スクロール（無限再生）をビューポート内だけにすべき理由
スライダーの再生やループの描画は、ビューポート内だけに留めるべきです。理由は大きく２つあります。
UX的観点
例えばページの中段に自動再生のスライダーがあるとします。ユーザーとしては、スライダーは１枚目から再生されることを期待しますが、自動再生が初めからアクティブになっていると、ビューポート内にスライダーが入る前から動いているためスライドが途中からになってしまう可能性があります。そのため、ビューポートの外ではスライダーを止めておいて、ビューポートに入った瞬間に（または少し余裕を持たせて）スライダーを動かすようにすべきです。
スクロールしてスライダーがビューポートから出た際も同様で、ビューポートから出た瞬間にスライダーを止めておいて、逆スクロールで再度ビューポートに入った際に、最後にアクティブだったスライダーから再生を再開すべきです。
パフォーマンスを落とさない
もう一つは、パフォーマンスを落とさないようにするためです。スライダーの描画処理にはそれなりに負荷がかかっていますので、ずっとスライダーをアクティブにしておくとローエンドな環境でページが重くなる可能性があります。特に、１ページに複数の自動再生スライダーを配置している場合や他に重めの処理がある場合にはより顕著になります。負荷を下げてページのパフォーマンスを高く保つためにも、スライダーのアクティブ/非アクティブは適切にコントロールしてあげる必要があります。
autoplayや自動スクロールをビューポート外で一時停止する方法
See the Pen Untitled by toshihide (@toshihide2000) on CodePen.
具体的に、コードの各部分が何をしているか、順を追って詳しく解説します。
AutoScroll: スライダーを自動でスクロールさせるための拡張機能です。
Intersection: スライダーが画面に表示されているかどうかを判定するための拡張機能です。
autoplay: 'pause', intersection: { inView: { autoplay: true, }, outView: { autoplay: false, }, },autoplayおよび自動スクロール（無限再生）をビューポート内だけに限定する記述です。
autoplay:pause で初期状態を停止状態にしておきます。
そしてinView（ビューポートに入った時）とoutView（ビューポートから出た時）でautoplayを切り替えるだけです。
new Splide(document._autoSlider, splideOptions).mount({ AutoScroll, Intersection });AutoScrollやIntersectionといったプラグインのマウントもお忘れなく。
まとめ
以上、スライダーの自動再生をビューポート内に限定した方がいい理由とその実装方法についてでした！細かいことだけど、気を配っていきたいところですね。
