ESL Carousel Nav

The esl-carousel-nav is an custom attribule (mixin) for ESLCarousel that provides navigation controls for the carousel. You can add it to any element that you want to use as a navigation control inside or outside of the carousel.

Configuration

There is only two attributes to configure the navigation mixin behaviour:

Usage

To use the mixin, you need to register the ESLCarouselNavMixin by

   ESLCarouselNavMixin.register();

Then you can use the mixin on any element you want to use as a navigation control:

<div class="esl-carousel-nav-container">
    <button esl-carousel-nav="prev">Previous</button>
    
    <esl-carousel>...</esl-carousel>
    
    <button esl-carousel-nav="next">Next</button>
</div>

or

<button esl-carousel-nav="prev" esl-carousel-nav-target="::next">Previous</button>
<esl-carousel>...</esl-carousel>    
<button esl-carousel-nav="next" esl-carousel-nav-target="::prev">Next</button>