ESL Carousel Wheel

The esl-carousel-wheel is a custom attribute (mixin) for ESLCarousel that provides wheel based navigation for the carousel. It is a carousel plugin, so it should be added directly to the esl-carousel element. Using esl-carousel-wheel plugin you can handle wheel events to navigate the carousel in different ways.

Configuration

As the esl-carousel-wheel is a plugin, it utilizes the ESLCarousel's plugin configuration system. That means the only source of configuration is the esl-carousel-wheel attribute value. It supports ESLMedia query syntax to provide different configurations for different media conditions (and it could be declared with a tuple syntax according to media attribute).

The configuration properties of the esl-carousel-wheel are the following:

type (primary property, could be declared as the only value in the attribute)

Declares the type of navigation to execute on the wheel event. Could be one of the following:

• slide - moves the carousel by a slide, based on long(inert) wheel interaction (default)
• group - moves the carousel by a group, based on long(inert) wheel interaction
• move - moves the carousel by the wheel delta amount (note: produces free state navigation)
• none - disables wheel navigation

direction (optional)

Restricts wheel direction. Values:

• auto - depends on the carousel orientation (default)
• x - horizontal only
• y - vertical only

ignore (optional)

The selector string to ignore elements for the wheel event. Default is [contenteditable].

preventDefault (optional)

Prevent default wheel event behavior when the event has been handled. Default is true.

Usage Examples

<!-- Basic wheel navigation by slide -->
<esl-carousel esl-carousel-wheel>
  <!-- carousel content -->
</esl-carousel>

<!-- Navigate by group -->
<esl-carousel esl-carousel-wheel="group">
  <!-- carousel content -->
</esl-carousel>

<!-- Move by wheel delta -->
<esl-carousel esl-carousel-wheel="move">
  <!-- carousel content -->
</esl-carousel>

<!-- Restricts wheel navigation for desktop only -->
<esl-carousel esl-carousel-wheel="slide | @desktop => none">
  <!-- carousel content -->
</esl-carousel>

<!-- Custom configuration -->
<esl-carousel esl-carousel-wheel="{type: 'slide', ignore: '[contenteditable], .no-wheel'}">
  <!-- carousel content -->
</esl-carousel>