Plugins

The Embla Carousel constructor accepts an optional plugin array as the thrid argument, which enables you to extend your carousels with additional features.

Adding a plugin

Here's a basic example of how to make use of it:

import EmblaCarousel from 'embla-carousel'
import Autoplay from 'embla-carousel-autoplay'

const options = { loop: true }
const plugins = [Autoplay()] // Plugins

const embla = EmblaCarousel(emblaNode, options, plugins) // Add plugins

You can find a complete list of plugins here.

Options

Plugins have their own specific options that allows for configuring the plugin to your liking. Here's how to make use of it:

import Autoplay from 'embla-carousel-autoplay'

const autoplayOptions = { delay: 2000 }
const autoplay = Autoplay(autoplayOptions)

Most plugins allows you to set global options that will be applied to all instances. This allows for overriding the default plugin options with your own:

import Autoplay from 'embla-carousel-autoplay'

Autoplay.globalOptions = { delay: 4000 }

Make sure to assign global options before initializing any instance. You should only assign it once, because re-assigning global options can lead to confusing code and unexpected behaviour.

Methods

Additionally, some plugins expose their own API methods. You can make use of these by storing the plugin instance in a variable before passing it to the Embla Carousel initialiser:

import EmblaCarousel from 'embla-carousel'
import Autoplay from 'embla-carousel-autoplay'

const autoplay = Autoplay({ delay: 2000 })
const embla = EmblaCarousel(emblaNode, options, [autoplay])

autoplay.play() // Call plugin method

Read more about how to customize your plugin by picking a plugin from this list.

Edit this page on GitHub