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.


Example

Installation

First you need to install the npm package and save it to your dependencies:

npm install embla-carousel-class-names --save

Usage

Please read the plugins page to learn how to work with plugins.

Options

Below follows an exhaustive list of all Class Names options and their default values.


snapped

Type: string | string[]
Default: is-snapped

Choose a class name that will be applied to the snapped slides. It's also possible to pass an array of class names. Pass an empty string to opt-out.


inView

Type: string | string[]
Default: is-in-view

Choose a class name that will be applied to slides in view. It's also possible to pass an array of class names. Pass an empty string to opt-out.

This feature will honor the inViewThreshold option.


draggable

Type: string | string[]
Default: is-draggable

Choose a class name that will be applied to a draggable carousel. It's also possible to pass an array of class names. Pass an empty string to opt-out.


dragging

Type: string | string[]
Default: is-dragging

Choose a class name that will be applied to the container when dragging. It's also possible to pass an array of class names. Pass an empty string to opt-out.


loop

Type: string | string[]
Default: is-loop

Choose a class name that will be applied to a carousel with loop activated. It's also possible to pass an array of class names. Pass an empty string to opt-out.


Edit this page on GitHub