Auto Scroll

自動スクロール

概要

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

  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 01
  • 02
  • 03
  • 04
  • 05
  • 06

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

インストール

NPM

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

$ 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

CDNまたはホスティング

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

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

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

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

オプション

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

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

speed

speed: number = 1

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

  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 01
  • 02
  • 03
  • 04
  • 05
  • 06

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