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.

import EmblaCarousel from 'embla-carousel'
import ClassNames from 'embla-carousel-class-names'

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:

import ClassNames from 'embla-carousel-class-names'

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.

Edit this page on GitHub