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.

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>

or

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