Plugins
It's possible to extend Embla carousel with additional features using plugins. The complete list of official plugins can be found here.
Usage
The Embla Carousel constructor accepts an array of plugins. Each plugin has its own options and methods.
Adding a plugin
The constructor plugin array is the default way of providing plugins to Embla Carousel. In the following example, the Autoplay plugin is added to the carousel:
import EmblaCarousel from 'embla-carousel'import Autoplay from 'embla-carousel-autoplay'
const embla = EmblaCarousel(emblaNode, { loop: true }, [Autoplay()])
import useEmblaCarousel from 'embla-carousel-react'import Autoplay from 'embla-carousel-autoplay'
export const EmblaCarousel = () => { const [emblaRef] = useEmblaCarousel({ loop: true }, [Autoplay()]) // ...}
<script> import emblaCarouselVue from 'embla-carousel-vue' import Autoplay from 'embla-carousel-autoplay'
export default { setup() { const [emblaNode] = emblaCarouselVue({ loop: true }, [Autoplay()]) // ... }, }</script>
Note that it's possible to change plugins passed to the Embla Carousel constructor after initialization with the reInit method.
Constructor options
Plugins have their own specific options which is the first argument of the plugin constructor. This allows for configuring the plugin to your liking:
import EmblaCarousel from 'embla-carousel'import Autoplay from 'embla-carousel-autoplay'
const embla = EmblaCarousel(emblaNode, { loop: true }, [ Autoplay({ delay: 4000 }),])
import useEmblaCarousel from 'embla-carousel-react'import Autoplay from 'embla-carousel-autoplay'
export const EmblaCarousel = () => { const [emblaRef] = useEmblaCarousel({ loop: true }, [ Autoplay({ delay: 4000 }), ]) // ...}
<script> import emblaCarouselVue from 'embla-carousel-vue' import Autoplay from 'embla-carousel-autoplay'
export default { setup() { const [emblaNode] = emblaCarouselVue({ loop: true }, [ Autoplay({ delay: 4000 }), ]) // ... }, }</script>
Global options
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 EmblaCarousel from 'embla-carousel'import Autoplay from 'embla-carousel-autoplay'
Autoplay.globalOptions = { delay: 4000 }
const embla = EmblaCarousel(emblaNode, { loop: true }, [Autoplay()])
import useEmblaCarousel from 'embla-carousel-react'import Autoplay from 'embla-carousel-autoplay'
Autoplay.globalOptions = { delay: 4000 }
export const EmblaCarousel = () => { const [emblaRef] = useEmblaCarousel({ loop: true }, [Autoplay()]) // ...}
<script> import emblaCarouselVue from 'embla-carousel-vue' import Autoplay from 'embla-carousel-autoplay'
Autoplay.globalOptions = { delay: 4000 }
export default { setup() { const [emblaNode] = emblaCarouselVue({ loop: true }, [Autoplay()]) // ... }, }</script>
Make sure to assign global options before initializing any carousel and only assign it once. Re-assigning global options might lead to confusing code and unexpected behaviour.
Calling methods
Additionally, some plugins expose their own API methods. You can access plugin methods by calling the plugin method like demonstrated below:
import EmblaCarousel from 'embla-carousel'import Autoplay from 'embla-carousel-autoplay'
const emblaApi = EmblaCarousel(emblaNode, { loop: true }, [Autoplay()])
emblaApi.plugins().autoplay.stop()
import { useEffect } from 'react'import useEmblaCarousel from 'embla-carousel-react'import Autoplay from 'embla-carousel-autoplay'
export const EmblaCarousel = () => { const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true }, [Autoplay()])
useEffect(() => { if (emblaApi) emblaApi.plugins().autoplay.stop() }, [emblaApi])
// ...}
<script> import { watchEffect } from 'vue' import emblaCarouselVue from 'embla-carousel-vue' import Autoplay from 'embla-carousel-autoplay'
export default { setup() { const [emblaNode, emblaApi] = emblaCarouselVue({ loop: true }, [ Autoplay(), ])
watchEffect(() => { if (emblaApi.value) emblaApi.value.plugins().autoplay.stop() })
// ... }, }</script>