Auto Scroll

自動スクロール

概要

Auto Scrollエクステンションは、スライダーの自動スクロールを実現します。フリードラッグモードとの相性が良いエクステンションです。

また、Intersectionエクステンションを利用すると、スライダーが画面内にあるときのみスクロールさせることができます。

インストール

NPM

最新版をNPMから取得してください。

$ npm install @splidejs/splide-extension-auto-scroll

$ npm install @splidejs/splide-extension-auto-scroll

Splideを初期化する際、Auto Scrollエクステンションをmount()メソッドに渡すと使用可能になります。

import { Splide } from '@splidejs/splide';
import { AutoScroll } from '@splidejs/splide-extension-auto-scroll';

new Splide( '.splide' ).mount( { AutoScroll } );
JavaScript

import { Splide } from '@splidejs/splide';
import { AutoScroll } from '@splidejs/splide-extension-auto-scroll';


new Splide( '.splide' ).mount( { AutoScroll } );

CDNまたはホスティング

jsDelivrから最新ファイルへのURLを取得するか、あるいはこのディレクトリからファイルをダウンロードし、<script>タグを用いてサイトにインポートしてください。

<script src="path-to-the-script/splide-extension-auto-scroll.min.js"></script>
HTML

<script src="path-to-the-script/splide-extension-auto-scroll.min.js"></script>

Splideを初期化する際、window.splide.Extensionsを渡せば準備完了です。

new Splide( '.splide' ).mount( window.splide.Extensions );
JavaScript

new Splide( '.splide' ).mount( window.splide.Extensions );

オプション

autoScrollオプションを通して、エクステンションの設定を変更できます。

new Splide( '.splide', {
  autoScroll: {
    speed: 2,
  },
} );
JavaScript

new Splide( '.splide', {
  autoScroll: {
    speed: 2,
  },
} );

`speed`

speed: number = 1

スクロールの速度を「アニメーションフレーム当たりのピクセル」で決定します。バージョン0.5.0以降では、負の値を指定することで逆方向にスクロールさせることもできます。

`autoStart`

autoStart: boolean = true

初期化後、自動的にスクロールを開始するかどうかを決定します。

`rewind`

rewind: boolean

最後のスライドに達した際、最初に巻き戻すかどうかを決定します。

`pauseOnHover`

pauseOnHover: boolean = true

スライダーの上にマウスカーソルが乗ったとき、スクロールを停止するかどうかを決定します。

`pauseOnFocus`

pauseOnFocus: boolean = true

スライダー内にフォーカスされた要素がある場合、スクロールを停止するかどうかを決定します。

メソッド

`play()`

play(): void

スクロールを開始します。

`pause()`

pause(): void

スクロールを停止します。

`isPaused()`

isPaused(): boolean

スクロールが停止しているかどうかを確認します。

返値

停止している場合はtrue、スクロール中はfalse