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

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