Class Names
Class Names is a class name toggle utility plugin for Embla Carousel. It enables you to automate the toggling of the following class names on your carousel:
selected
draggable
dragging
Installation
First you need to install the npm package and save it to your dependencies:
npm install embla-carousel-class-names --save
Alternatively, you can use a CDN to include it in your project:
<script src="https://unpkg.com/embla-carousel-class-names/embla-carousel-class-names.umd.js"></script>
Usage
This plugin accepts a single optional parameter, which is its options object that allows you to configure it.
const options = { selected: 'my-selected-class' } // Options
const embla = EmblaCarousel(emblaRoot, { loop: false }, [ClassNames(options)]) // Add plugin
Options
The Class Name plugin accepts an optional options object as the first argument. Here's an example of how to make use of it:
const options = { selected: 'my-selected-class' }
const classNames = ClassNames(options)
selected
Type: string
Default: is-selected
Choose a classname that will be applied to the selected slides. Pass an empty string to opt-out.
draggable
Type: string
Default: is-draggable
Choose a classname that will be applied to a draggable carousel container. Pass an empty string to opt-out.
dragging
Type: string
Default: is-dragging
Choose a classname that will be applied to the container when dragging. Pass an empty string to opt-out.