Modern lightweight Vue 3 carousel component
- 📱 Responsive - Breakpoints support
- 🔄 Infinite Scroll - Wrap around sliding
- 🖱️ Mouse/Touch - Dragging support
- ⚡ Auto Play - Automatic sliding
- 🎯 Slide Classes - Active & visible states
- 🌐 RTL - Right-to-left support
- ♿ A11y - Keyboard navigation & ARIA labels
- 📊 Vertical - Vertical sliding mode
# npm
npm i vue3-carousel
# yarn
yarn add vue3-carousel
# pnpm
pnpm install vue3-carousel<script setup>
// If you are using PurgeCSS, make sure to whitelist the carousel CSS classes
import 'vue3-carousel/carousel.css'
import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel'
const carouselConfig = {
itemsToShow: 2.5,
wrapAround: true
}
</script>
<template>
<Carousel v-bind="carouselConfig">
<Slide v-for="slide in 10" :key="slide">
<div class="carousel__item">{{ slide }}</div>
</Slide>
<template #addons>
<Navigation />
<Pagination />
</template>
</Carousel>
</template>Visit our documentation website for detailed usage and examples:
For Nuxt users, check out vue3-carousel-nuxt module.