Autoplay

Automatically advances the slider on a fixed interval. Pauses on hover and focus by default, and always pauses while the user is touching or dragging.

Import

import { autoplay } from '@andresclua/sliderkit-plugins'

Options

Option	Type	Default	Description
delay	number	3000	Milliseconds between slide advances.
pauseOnHover	boolean	true	Pause while the cursor is over the slider.
pauseOnFocus	boolean	true	Pause while any element inside the slider has focus (keyboard accessibility).
direction	'forward' | 'backward'	'forward'	Which direction to advance automatically.

CSS classes

Class	Applied to	When
.sliderkit--autoplay-playing	outer wrapper	Autoplay is running.
.sliderkit--autoplay-paused	outer wrapper	Autoplay is paused (hover, focus, touch, drag).

Basic example

import { Slider } from '@andresclua/sliderkit'
import { arrows, pagination, autoplay } from '@andresclua/sliderkit-plugins'

new Slider('#my-slider', {
  items: 1,
  loop:  true,
  speed: 500,
  plugins: [
    arrows(),
    pagination({ type: 'dots', clickable: true }),
    autoplay({ delay: 3000, pauseOnHover: true }),
  ],
})

With progress bar

Use pagination({ type: 'progress' }) alongside autoplay for a visual countdown. Match the CSS transition duration to your delay:

plugins: [
  pagination({ type: 'progress' }),
  autoplay({ delay: 4000 }),
]

/* match transition duration to delay */
.sliderkit__pagination-progress-fill {
  transition: width 3800ms linear; /* ~200ms less than delay for smoothness */
}

Reverse direction

autoplay({ delay: 2500, direction: 'backward' })

Behaviour notes

• Autoplay always pauses during a touch swipe or mouse drag, and resumes on release.
• pauseOnFocus is on by default — this is the correct accessible behaviour. Users navigating by keyboard won't lose their place mid-slider.
• Calling slider.destroy() clears the timer automatically.

See it live in the Autoplay demo →