Auto Scroll

Overview

continuously scrolls the slider. This goes well with "Drag Free" mode.
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 01
  • 02
  • 03
  • 04
  • 05
  • 06

This extension is compatible with the Intersection extension that allows you to start auto scroll only when the slider is in the viewport.

Installation

NPM

Get the latest version by NPM:

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

Then, mount the extension to Splide:

import { Splide } from '@splidejs/splide';
import { AutoScroll } from '@splidejs/splide-extension-auto-scroll';
new Splide( '.splide' ).mount( { AutoScroll } );
JavaScript

CDN or Hosting Files

Visit jsDelivr and get the link of the latest file, or download files from the dist directory. And then, import the minified script on your site:

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

After importing files, mount the extension to Splide:

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

Options

This extension takes several options as autoScroll:

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

speed

speed: number = 1

The scroll speed as pixel/frame.


autoStart

autoStart: boolean = true

Determines whether to start scrolling the slider after initialization.


rewind

rewind: boolean

Determines whether to rewind the slider when it reaches the end.


pauseOnHover

pauseOnHover: boolean = true

Determines whether to pause the auto scroll when the cursor is on the slider.


pauseOnFocus

pauseOnFocus: boolean = true

Determines whether to pause the auto scroll when the slider contains an active element.

Methods

play()

play(): void

Starts scrolling the slider.


pause()

pause(): void

Pauses auto scroll.