Vue
Start by installing the Embla Carousel npm package and add it to your dependencies.
npm install embla-carousel-vue --save
yarn add embla-carousel-vue
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:
<template> <div class="embla" ref="emblaNode"> <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>
<script> import emblaCarouselVue from 'embla-carousel-vue'
export default { setup() { const [emblaNode] = emblaCarouselVue() return { emblaNode } }, }</script>
Styling the carousel
The emblaCarouselVue
function gives us an emblaNode 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>
Accessing the carousel API
The emblaCarouselVue
function takes the Embla Carousel options as the first argument. Additionally, you can access the API with an watchEffect
like demonstrated below:
<template> <div class="embla" ref="emblaNode"> <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>
<script> import { watchEffect } from 'vue' import emblaCarouselVue from 'embla-carousel-vue'
export default { setup() { const [emblaNode, emblaApi] = emblaCarouselVue({ loop: false })
watchEffect(() => { if (emblaApi.value) { console.log(emblaApi.value.slideNodes()) // Access API } })
return { emblaNode, emblaApi } }, }</script>
Adding plugins
The emblaCarouselVue
function also accepts plugins as the second argument. Note that plugins need to be passed in an array like so:
<template> <div class="embla" ref="emblaNode"> <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>
<script> import emblaCarouselVue from 'embla-carousel-vue' import Autoplay from 'embla-carousel-autoplay'
export default { setup() { const [emblaNode] = emblaCarouselVue({ loop: false }, [Autoplay()]) return { emblaNode } }, }</script>
Congratulations! You just created your first Embla Carousel component.