ESL Carousel Container Class Behavior

The esl-carousel-class-behavior is a plugin (mixin) for ESLCarousel that provides advanced control over the container-class feature. By default, the container-class attribute works out-of-the-box in default mode, where classes are updated on the container after the slide change. The plugin enables a proactive mode, where classes are updated as soon as the slide change starts, which can be useful for certain animation types.

Note: The plugin is currently in beta and only supports the mode configuration.

Configuration

The esl-carousel-class-behavior plugin uses the ESLMediaQuery syntax for configuration. The only supported configuration option is mode, which can be set to either default or proactive.

default: The container's classes are updated after completing the slide change. This is the default ESLCarousel behavior, the plugin is not needed if you use only this mode.
proactive: The container's classes are updated as soon as the slide change starts, before the transition begins. This mode is useful for animations that require the container class to be updated immediately.

NOTE: As was previously mentioned, the plugin value supports the ESLMediaQuery syntax, which allows you to switch between different modes based on animation and renderer you use.

NOTE: Plugin does not change target for the container-class attribute, so it behaves exactly like ESLCarousel's API defines it (based on container attribute).

Usage

To use the mixin, register the ESLCarouselContainerClassMixin:

ESLCarouselClassBehaviourMixin.register();

Then use the mixin on any esl-carousel element where you want to control container classes:

<esl-carousel esl-carousel-class-behavior="proactive">
  <ul esl-carousel-slides>
    <li esl-carousel-slide container-class="my-slide-class-1">Slide 1</li>
    <li esl-carousel-slide container-class="my-slide-class-2">Slide 2</li>
  </ul>
</esl-carousel>

To use different modes for different renderers/media conditions:

<esl-carousel media="@XS|@+SM" type="css-slide|css-fade" esl-carousel-class-behavior="default|proactive">
  ...
</esl-carousel>

<esl-carousel media="@XS|@+SM" type="css-slide|css-fade" esl-carousel-class-behavior="default | @+SM => proactive">
  ...
</esl-carousel>