vue3-carousel

esm cjs Styles
A simple carousel component for Vue 3
Version 0.15.1 License MIT
Keywords
vuevue3carouselslidervue3-carouselvue3-slider
INSTALL
Type:
Version:
- Static
- Latest Patch
- Latest Minor
- Latest Major
- 0.15.1
- 0.15.0
- 0.14.0
- 0.13.0
- 0.12.0
- 0.11.0
- 0.10.0
- 0.9.0
- 0.8.1
- 0.8.0
- 0.7.1
- 0.7.0
- 0.6.0
- 0.5.1
- 0.5.0
- 0.4.0
- 0.3.4
- 0.3.3
- 0.3.1
- 0.3.0
- 0.2.16
- 0.2.15
- 0.2.14
- 0.2.13
- 0.2.12
- 0.2.11
- 0.2.10
- 0.2.9
- 0.2.8
- 0.2.6
- 0.2.5
- 0.2.4
- 0.2.2
- 0.2.1
- 0.2.0
- 0.1.48
- 0.1.47
- 0.1.46
- 0.1.45
- 0.1.44
- 0.1.43
- 0.1.40
- 0.1.38
- 0.1.36
- 0.1.35
- 0.1.34
- 0.1.33
- 0.1.32
- 0.1.31
- 0.1.30
- 0.1.29
- 0.1.28
- 0.1.27
- 0.1.26
- 0.1.25
- 0.1.24
- 0.1.23
- 0.1.22
- 0.1.21
- 0.1.20
- 0.1.19
- 0.1.18
- 0.1.17
- 0.1.16
- 0.1.15
- 0.1.14
- 0.1.13
- 0.1.12
- 0.1.11
- 0.1.10
- 0.1.9
- 0.1.8
- 0.1.7
- 0.1.6
- 0.1.5
- 0.1.4
- 0.1.3
- 0.1.2
- 0.1.1
- 0.0.0
<link href=" https://cdn.jsdelivr.net/npm/vue3-carousel@0.15.1/dist/carousel.min.css " rel="stylesheet">
Vue 3 Carousel
Modern lightweight Vue 3 carousel component
✨ Features
- 📱 Responsive - Breakpoints support
- 🔄 Infinite Scroll - Wrap around sliding
- 🖱️ Mouse/Touch - Dragging support
- 🖲️ Mouse Wheel - Scroll navigation support
- ⚡ Auto Play - Automatic sliding
- 🎯 Slide Classes - Active & visible states
- 🌐 RTL - Right-to-left support
- ♿ A11y - Keyboard navigation & ARIA labels
- 📊 Vertical - Vertical sliding mode
🚀 Installation
# npm
npm i vue3-carousel
# yarn
yarn add vue3-carousel
# pnpm
pnpm install vue3-carousel
📖 Basic Usage
<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>
📚 Documentation
Visit our documentation website for detailed usage and examples:
- Getting Started
- Carousel Configuration
- Carousel Component
- Slide Component
- Navigation Component
- Pagination Component
💚 Nuxt Module
For Nuxt users, check out vue3-carousel-nuxt module.