Modern lightweight Vue 3 carousel component
https://vue3-carousel.ismail9k.com/
- [x] Responsive breakpoints
- [x] Mouse/touch dragging
- [x] Infinity scroll (wrapping around)
- [x] Auto play
- [x] Add classes for active and for visible slides
- [x] RTL
- [x] Enrich a11y
- [x] Vertical Slides
If you're using Nuxt and prefer to use it via module, please refer to vue3-carousel-nuxt
First step is to install it using yarn
or npm
:
npm install vue3-carousel
# or use yarn
yarn add vue3-carousel
<script setup>
// If you are using PurgeCSS, make sure to whitelist the carousel CSS classes
import 'vue3-carousel/dist/carousel.css'
import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel'
const config = {
itemsToShow: 1.5
}
</script>
<template>
<Carousel v-bind="config">
<Slide v-for="slide in 10" :key="slide">
{{ slide }}
</Slide>
<template #addons>
<Navigation />
<Pagination />
</template>
</Carousel>
</template>