Class Names
View plugin on GitHub
Class Names is a class name toggle utility plugin for Embla Carousel that enables you to automate the toggling of class names on your carousel.
Installation
First you need to install the npm package and save it to your dependencies:
npm install embla-carousel-class-names --save
yarn add embla-carousel-class-names
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.
import EmblaCarousel from 'embla-carousel'import ClassNames from 'embla-carousel-class-names'
const embla = EmblaCarousel(emblaRoot, { loop: false }, [ClassNames()]) // 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:
import EmblaCarousel from 'embla-carousel'import ClassNames from 'embla-carousel-class-names'
const classNamesOptions = { selected: 'my-selected-class' }
const embla = EmblaCarousel(emblaRoot, { loop: false }, [ ClassNames(classNamesOptions), // Add plugin with 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.