Class Names

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:

<script src="https://unpkg.com/embla-carousel-class-names/embla-carousel-class-names.umd.js"></script>

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

yarn add embla-carousel-class-names

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.

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.