Automatically updates selection on a timer


Purpose: provides for automatic timed changes in selection.

This mixin works at the beginning of the Elix render pipeline:

eventsmethods → setState → render DOM → post-render

Expects the component to provide:

  • selectNext method.

Provides the component with:

  • A timer that automatically advances the selection.
  • play and pause methods for playing and pausing the timer.
  • playing property that is true when the timer is playing.


import TimerSelectionMixin from "elix/src/base/TimerSelectionMixin.js";
class MyElement extends TimerSelectionMixin(HTMLElement) {}
Mountain lake Terraced farm Winter trees Forest river Red panda
Demo: SlideshowWithPlayControls uses TimerSelectionMixin for its timer

The selectionTimerDuration property defines how much time will elapse before moving to the next item. If the user changes the selection, or the selection changes for any other reason, the timer resets. This ensures the user has a chance to look at the item they want before the timer advances the selection.


Used by classes CarouselSlideshow, PlainCarouselSlideshow, PlainSlideshow, PlainSlideshowWithPlayControls, Slideshow, and SlideshowWithPlayControls.

pause() method

Pause automatic progression of the selection.

play() method

Begin automatic progression of the selection.

playing property

True if the element is playing.

Type: boolean

Default: false

selectionTimerDuration property

The time in milliseconds that will elapse after the selection changes before the selection will be advanced to the next item in the list.

Type: number

Default: 1000 (1 second)