Carousel

Embla GitHub

A carousel with motion and swipe built using Embla.

Usage

Use the Carousel component to display a list of items in a carousel.

Use your mouse to drag the carousel horizontally on desktop.

Items

Use the items prop as an array and render each item using the default slot:

You can also pass an array of objects with the following properties:

class?: any
ui?: { item?: ClassNameValue }

You can control how many items are visible by using the basis / width utility classes on the item:

Orientation

Use the orientation prop to change the orientation of the Progress. Defaults to horizontal.

Use your mouse to drag the carousel vertically on desktop.

You need to specify a height on the container in vertical orientation.

Arrows

Use the arrows prop to display prev and next buttons.

Prev / Next

Use the prev and next props to customize the prev and next buttons with any Button props.

Prev / Next Icons

Use the prev-icon and next-icon props to customize the buttons Icon. Defaults to i-lucide-arrow-left / i-lucide-arrow-right.

prevIcon

nextIcon

You can customize these icons globally in your app.config.ts under ui.icons.arrowLeft / ui.icons.arrowRight key.

You can customize these icons globally in your vite.config.ts under ui.icons.arrowLeft / ui.icons.arrowRight key.

Dots

Use the dots prop to display a list of dots to scroll to a specific slide.

The number of dots is based on the number of slides displayed in the view:

Plugins

The Carousel component implements the official Embla Carousel plugins.

Autoplay

This plugin is used to extend Embla Carousel with autoplay functionality.

Use the autoplay prop as a boolean or an object to configure the Autoplay plugin.

In this example, we're using the loop prop for an infinite carousel.

Auto Scroll

This plugin is used to extend Embla Carousel with auto scroll functionality.

Use the auto-scroll prop as a boolean or an object to configure the Auto Scroll plugin.

In this example, we're using the loop prop for an infinite carousel.

Auto Height

This plugin is used to extend Embla Carousel with auto height functionality. It changes the height of the carousel container to fit the height of the highest slide in view.

Use the auto-height prop as a boolean or an object to configure the Auto Height plugin.

In this example, we add the transition-[height] class on the container to animate the height change.

Class Names

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.

Use the class-names prop as a boolean or an object to configure the Class Names plugin.

In this example, we add the transition-opacity [&:not(.is-snapped)]:opacity-10 classes on the item to animate the opacity change.

Fade

This plugin is used to replace the Embla Carousel scroll functionality with fade transitions.

Use the fade prop as a boolean or an object to configure the Fade plugin.

Wheel Gestures

This plugin is used to extend Embla Carousel with the ability to use the mouse/trackpad wheel to navigate the carousel.

Use the wheel-gestures prop as a boolean or an object to configure the Wheel Gestures plugin.

Use your mouse wheel to scroll the carousel.

Prop	Default	Type

Slots

Slot	Type

Emits

Event	Type

Expose

You can access the typed component instance using useTemplateRef.

<script setup lang="ts">
const carousel = useTemplateRef('carousel')
</script>

<template>
  <UCarousel ref="carousel" />
</template>

This will give you access to the following:

Name	Type
`emblaRef`	`Ref<HTMLElement \| null>`
`emblaApi`	`Ref<EmblaCarouselType \| null>`

Theme

app.config.ts

export default defineAppConfig({
  ui: {
    '': {}
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        '': {}
      }
    })
  ]
})

Changelog

No recent changes

Accordion

A stacked set of collapsible panels.

Empty

A component to display an empty state.