Adds previous/next arrow buttons to a carousel-like component


Purpose: adds left and right arrow buttons to a carousel-like component like Carousel.

This mixin does most of its work at the beginning of the Elix render pipeline:

eventsmethods → setState → render DOM → post-render

Expects the component to provide:

  • internal.canGoLeft and internal.canGoRight properties, typically via DirectionSelectionMixin. These properties determine when the arrow buttons are enabled or disabled. If the component does not define these properties, the arrow buttons are always enabled.
  • internal.goLeft and internal.goRight methods, typically via DirectionSelectionMixin.
  • internal.template property for ShadowTemplateMixin. The property getter must invoke the mixin's wrapWithArrowDirection (below).

Provides the component with:

  • wrap method that destructively wraps a template with the elements for left and right arrow buttons.


import { ArrowDirectionMixin, ReactiveElement, internal, template } from 'elix';

class MyElement extends ArrowDirectionMixin(ReactiveElement) {
  get [internal.template]() {
    const t = template.html`
      <div id="container">
    // Wrap the indicated container with arrows.
    const container = t.content.querySelector('#container');
    return t;

ArrowDirectionMixin is a mixin that contributes to a component's template, as shown above.

As currently implemented, ArrowDirectionMixin only displays the arrow buttons if mouse movement is detected. This behavior is intended to avoid showing arrows when the user is viewing a carousel-like component on a mobile device with no mouse. In such cases, it is expected that the component will provided touch gestures (e.g., with TouchSwipeMixin), so the arrows are unnecessary and may prove distracting or reduce the screen real estate available for touch gestures.


In addition to custom styling via template patching or the internal.render method, ArrowDirectionMixin supports the following customizations:

  • arrowButton property: specifies the element role used for the left and right arrow buttons.
  • arrowButtonLeft slot: sets the content of the left arrow button.
  • arrowButtonRight slot: sets the content of the right arrow button.


Mountain lake Terraced farm Winter trees Forest river Red panda
Demo: ArrowDirectionMixin provides left and right arrow buttons if a mouse is detected


By default, this uses these elements in the following roles:

Used by classes CalendarMonthNavigator, Carousel, CarouselSlideshow, and CarouselWithThumbnails.

arrowButtonOverlap property

True if the arrow buttons should overlap the component contents; false if they should appear to the side of the contents.

Type: boolean

Default: true

arrowButtonRole property

The class, tag, or template used to create the previous/next arrow buttons.

Type: (component class constructor)|HTMLTemplateElement|string

Default: ArrowDirectionButton

wrap(original) method

Destructively wrap a node with elements to show arrow buttons.


  • original: Nodethe node that should be wrapped by buttons