Configuration

All options can be passed as the second argument to ContinuousCarousel():

const carousel = ContinuousCarousel('myCarousel', {
  direction: 'horizontal',
  numVisible: 2,
  interval: 3000,
  pauseOnHover: true
});

Quick Reference

Option	Type	Default	Description
direction	string	'horizontal'	Scroll direction
numVisible	number	1	Items visible at once
interval	number	2000	Time between transitions (ms)
transitionDuration	number	1000	Transition animation length (ms)
easing	string	'ease-in-out'	CSS transition-timing-function value
pauseOnHover	boolean	false	Pause on mouse hover
pauseOnFocus	boolean	false	Pause on element focus
autoplay	boolean	true	Start automatically
observeVisibility	boolean	true	Pause when off-screen
observeResize	boolean	true	Recalculate on resize
keyboardNav	boolean	true	Enable keyboard navigation
announceSlides	boolean	true	Announce slides for screen readers
onSlideChange	function	null	Fired when a slide begins transitioning
onSlideEnd	function	null	Fired after the transition completes
onPause	function	null	Fired when paused
onPlay	function	null	Fired when played
onDestroy	function	null	Fired when destroyed

---

Core Options

direction

• Type: 'horizontal' | 'vertical'
• Default: 'horizontal'

Scroll direction of the carousel. Also set via the data-direction HTML attribute.

ContinuousCarousel('myCarousel', {
  direction: 'vertical'
});

• 1
• 2
• 3
• 4
• 5
• 6

numVisible

• Type: number
• Default: 1

Number of items visible at once. Also set via the data-num-visible HTML attribute. Must be less than the total number of items.

ContinuousCarousel('myCarousel', {
  numVisible: 3
});

• 1
• 2
• 3
• 4
• 5
• 6

Timing Options

interval

• Type: number (milliseconds)
• Default: 2000

Time between transitions. Lower values = faster scrolling.

ContinuousCarousel('myCarousel', {
  interval: 4000 // 4 seconds between slides
});

transitionDuration

• Type: number (milliseconds)
• Default: 1000

Duration of the slide transition animation. Should be less than interval.

ContinuousCarousel('myCarousel', {
  transitionDuration: 500 // Fast transition
});

easing

• Type: string
• Default: 'ease-in-out'

CSS transition-timing-function value applied to the slide animation. Accepts any valid CSS easing: named keywords, cubic-bezier(...), or steps(...).

ContinuousCarousel('myCarousel', {
  easing: 'linear'
});

ContinuousCarousel('myCarousel', {
  easing: 'cubic-bezier(0.4, 0, 0.2, 1)'
});

Feature Options

pauseOnHover

• Type: boolean
• Default: false

Pause the carousel when the mouse hovers over it. Resumes when the mouse leaves.

ContinuousCarousel('myCarousel', {
  pauseOnHover: true
});

• 1
• 2
• 3
• 4
• 5
• 6

TIP

Hover over the carousel above to see it pause.

pauseOnFocus

• Type: boolean
• Default: false

Pause the carousel when any element inside it receives keyboard focus.

ContinuousCarousel('myCarousel', {
  pauseOnFocus: true
});

autoplay

• Type: boolean
• Default: true

Whether the carousel starts automatically. Set to false to start paused and control playback via the API.

const carousel = ContinuousCarousel('myCarousel', {
  autoplay: false
});

// Start manually later
carousel.play();

observeVisibility

• Type: boolean
• Default: true

Uses IntersectionObserver to automatically pause the carousel when it's scrolled off-screen. Saves battery and CPU on mobile devices.

ContinuousCarousel('myCarousel', {
  observeVisibility: false // Disable auto-pause
});

observeResize

• Type: boolean
• Default: true

Uses ResizeObserver to recalculate carousel dimensions when the container is resized. Ensures the carousel stays responsive.

ContinuousCarousel('myCarousel', {
  observeResize: false // Disable resize handling
});

keyboardNav

• Type: boolean
• Default: true

Enables keyboard navigation. When the carousel has focus:

• Arrow Right / Down — advance forward
• Arrow Left / Up — advance backward
• Space / Enter — toggle pause/play

Sets tabindex="0", role="region", and aria-roledescription="carousel" on the container.

ContinuousCarousel('myCarousel', {
  keyboardNav: false // Disable keyboard navigation
});

announceSlides

• Type: boolean
• Default: true

Enables ARIA live region announcements for screen readers when slides change.

ContinuousCarousel('myCarousel', {
  announceSlides: false // Disable screen reader announcements
});

Callbacks

onSlideChange

• Type: function(index, element) | null
• Default: null

Called when a slide begins transitioning. Receives the 1-based slide index and the active slide's DOM element.

ContinuousCarousel('myCarousel', {
  onSlideChange: (index, element) => {
    console.log('Current slide:', index, element);
  }
});

onSlideEnd

• Type: function(index, element) | null
• Default: null

Called after the slide transition animation completes. Receives the same arguments as onSlideChange. Useful for triggering actions only once the animation has settled.

ContinuousCarousel('myCarousel', {
  onSlideEnd: (index, element) => {
    console.log('Transition complete for slide:', index);
  }
});

onPause

• Type: function() | null
• Default: null

Called when the carousel is paused (via API, hover, focus, or visibility).

ContinuousCarousel('myCarousel', {
  onPause: () => {
    console.log('Carousel paused');
  }
});

onPlay

• Type: function() | null
• Default: null

Called when the carousel resumes playing.

ContinuousCarousel('myCarousel', {
  onPlay: () => {
    console.log('Carousel playing');
  }
});

onDestroy

• Type: function() | null
• Default: null

Called when the carousel is destroyed via carousel.destroy().

ContinuousCarousel('myCarousel', {
  onDestroy: () => {
    console.log('Carousel destroyed');
  }
});