Class Names

View plugin on GitHub

The Class Names plugin is a utility for Embla Carousel that automatically adds and removes CSS class names based on the carousel's state, making it easy to style active, in-view, or selected slides.

Example

Installation

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

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

Options

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

active

Type:boolean
Default: true

{ active: false | true }

Setting this to false will not activate or deactivate the plugin. Useful when used together with the breakpoints option to toggle the plugin active/inactive depending on media queries.

breakpoints

Type:ClassNamesOptionsType
Default: {}

{   active: false,  '(min-width: 768px)': { active: true }}

An object with options that will be applied for a given breakpoint by overriding the options at the root level.

Note: If multiple queries match, they will be merged. And when breakpoint options clash, the last one in the list has precedence.

snapped

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

{ snapped: 'is-snapped' | ['is-snapped', 'is-snapped-2'] }

Choose a class name that will be applied to the snapped slides, meaning the canoncically selected 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

{ inView: 'is-in-view' | ['is-in-view', 'is-in-view-2'] }

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

{ draggable: 'is-draggable' | ['is-draggable', 'is-draggable-2'] }

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.

pointerDown

Type:string | string[]
Default: is-pointer-down

{ pointerDown: 'is-pointer-down' | ['is-pointer-down', 'is-pointer-down-2'] }

Choose a class name that will be applied to the container when pointer is down on the carousel. 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

{ loop: 'is-loop' | ['is-loop', 'is-loop-2'] }

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