Vue

Embla Carousel provides a wrapper for Vue that ensures seamless integration of the carousel into your Vue project and automatic cleanup on component unmount.

Start by installing the Embla Carousel npm package and add it to your dependencies.

npm install embla-carousel-vue --save

Note: embla-carousel-vue only supports Vue 3 and up. However, you can use the core package that embla-carousel-vue is using under the hood, and re-create the behaviour of embla-carousel-vue. Here's an example of how you can use Embla Carousel with Vue 2 Options API.

The component structure

Embla Carousel provides the handy emblaCarouselVue function for seamless integration with Vue. A minimal setup requires an overflow wrapper and a scroll container. Start by adding the following structure to your carousel:

<script setup>  import emblaCarouselVue from 'embla-carousel-vue'
  const [emblaRef] = emblaCarouselVue()</script>
<template>  <div class="embla" ref="emblaRef">    <div class="embla__container">      <div class="embla__slide">Slide 1</div>      <div class="embla__slide">Slide 2</div>      <div class="embla__slide">Slide 3</div>    </div>  </div></template>

The emblaCarouselVue function gives us an emblaRef to attach to our wrapping element with the classname embla, which is needed to cover the scroll overflow. The element with the container classname is the scroll body that scrolls the slides. Continue by adding the following CSS to these elements:

<style scoped>  .embla {    overflow: hidden;  }  .embla__container {    display: flex;  }  .embla__slide {    flex: 0 0 100%;    min-width: 0;  }</style>

The emblaCarouselVue function takes the Embla Carousel options as the first argument. Additionally, you can access the API with an onMounted like demonstrated below:

<script setup>  import { onMounted } from 'vue'  import emblaCarouselVue from 'embla-carousel-vue'
  const [emblaRef, emblaApi] = emblaCarouselVue({ loop: false })
  onMounted(() => {    if (emblaApi.value) {      console.log(emblaApi.value.slideNodes()) // Access API    }  })</script>
<template>  <div class="embla" ref="emblaRef">    <div class="embla__container">      <div class="embla__slide">Slide 1</div>      <div class="embla__slide">Slide 2</div>      <div class="embla__slide">Slide 3</div>    </div>  </div></template>

Adding plugins

Start by installing the plugin you want to use. In this example, we're going to install the Autoplay plugin:

npm install embla-carousel-autoplay --save

The emblaCarouselVue function accepts plugins as the second argument. Note that plugins need to be passed in an array like so:

<script setup>  import emblaCarouselVue from 'embla-carousel-vue'  import Autoplay from 'embla-carousel-autoplay'
  const [emblaRef] = emblaCarouselVue({ loop: false }, [Autoplay()])</script>
<template>  <div class="embla" ref="emblaRef">    <div class="embla__container">      <div class="embla__slide">Slide 1</div>      <div class="embla__slide">Slide 2</div>      <div class="embla__slide">Slide 3</div>    </div>  </div></template>

Congratulations! You just created your first Embla Carousel component.

Edit this page on GitHub