Skip to content

Latest commit

 

History

History
104 lines (66 loc) · 2.54 KB

class-names.mdx

File metadata and controls

104 lines (66 loc) · 2.54 KB
Raw
title description order date
Class Names
Learn how to use the Class Names plugin for Embla Carousel
3
2021-11-22

import { Tabs } from 'components/Tabs/Tabs' import { TabsItem } from 'components/Tabs/TabsItem' import { TABS_PACKAGE_MANAGER } from 'consts/tabs' import { ClassNames } from 'components/Examples/Plugins/ClassNames'

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:

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

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

```shell
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
Default: is-snapped

Choose a classname that will be applied to the snapped slides. Pass an empty string to opt-out.

inView

Type: string
Default: is-in-view

Choose a classname that will be applied to slides in view. Pass an empty string to opt-out.

This feature will honor the [inViewThreshold](/api/options/#inviewthreshold) option.

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.