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:
<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.
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.