A lightweight, modern, responsive carousel component for Vue.js 3 powered apps.
How to use it:
1. Import and register the component.
import 'vue3-carousel/dist/carousel.css'; import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel';
export default { components: { Carousel, Slide, Pagination, Navigation, }, };
2. Add the carousel component to the app. That’s it.
<template> <carousel> <slide v-for="slide in 10" :key="slide">{{ slide }}</slide> <template #addons> <navigation /> </template> </carousel> </template>
3. Possible props to customize the carousel.
// count of items to showed per view itemsToShow: { default: 1, type: Number, }, // count of items to be scrolled itemsToScroll: { default: 1, type: Number, }, // control infinite scrolling mode wrapAround: { default: false, type: Boolean, }, // control snap position alignment snapAlign: { default: 'center', validator(value: string) { // The value must match one of these strings return ['start', 'end', 'center'].includes(value); }, }, // sliding transition time in ms transition: { default: 300, type: Number, }, // an object to pass all settings settings: { default() { return {}; }, type: Object, }, // an object to store breakpoints breakpoints: { default: null, type: Object, }, // time to auto advance slides in ms autoplay: { default: 0, type: Number, }, // slide number number of initial slide modelValue: { default: undefined, type: Number, }, // toggle mouse dragging. mouseDrag: { default: true, type: Boolean, }, // toggle mouse dragging. touchDrag: { default: true, type: Boolean, },
Preview:
Changelog:
v0.3.1 (04/30/2023)
- Support i18n for text and ARIA labels
v0.3.0 (04/09/2023)
- feat: add before-init event
v0.2.16 (04/02/2023)
- enhance getSlidesVNodes logic
v0.2.15 (04/01/2023)
- Add ability to use select tag inside slides
v0.2.14 (03/24/2023)
- enhance carousel preformance
v0.2.13 (03/19/2023)
- enhance: touch behavior
v0.2.12 (03/02/2023)
- Add throttle to allow customization of drag throttle
v0.2.11 (02/22/2023)
- bugfix
v0.2.9 (12/12/2022)
- fix: dynamic adding slides
v0.2.8 (11/28/2022)
- Bugfix
v0.2.6 (11/27/2022)
- Feat: support emit events
v0.2.5 (11/03/2022)
- Bugfix
v0.2.4 (10/16/2022)
- Bugfix
v0.2.o (10/04/2022)
- Enhance a11y and styles
v0.1.48 (09/30/2022)
- feat: add more CSS variables to control pagination component
v0.1.47 (09/27/2022)
- update
v0.1.46 (08/15/2022)
- fix: stop watching modelValue
v0.1.44 (08/14/2022)
- fix: carousel dragging
v0.1.43 (04/28/2022)
- bugfix
v0.1.40 (04/28/2022)
- feat: prevent clicking after sliding
v0.1.38 (03/24/2022)
- update
v0.1.37 (02/05/2022)
- fix: slide width calculated as zero
v0.1.36 (01/23/2022)
- update
v0.1.35 (12/19/2021)
- enhance: fix issues and make carousel more durable
v0.1.34 (12/13/2021)
- fix: Carousel needed double clicks for clicks to work
v0.1.33 (12/12/2021)
- Add optionaly css class to hide in active navigation arrows
v0.1.32 (11/29/2021)
- update
v0.1.31 (11/28/2021)
- style: linting and fix typos
v0.1.30 (11/03/2021)
- feat: enhance wrapping around
v0.1.29 (10/26/2021)
- feat: better ts support
v0.1.28 (10/17/2021)
- feat: support center odd and even values for snap align prop
v0.1.27 (09/11/2021)
- feat: update carousel variables
v0.1.25 (08/16/2021)
- feat: ability to pause autoplay when the carousel has hovered
v0.1.24 (06/21/2021)
- feat: add status classes
v0.1.23 (06/21/2021)
- feat: toggle mouse/touch dragging
v0.1.21 (05/25/2021)
- Fix overflow slides
v0.1.19 (05/05/2021)
- Add support for autoplay
v0.1.18 (05/01/2021)
- update
v0.1.17 (04/25/2021)
- fix: remove slide updating issue
v0.1.15 (04/08/2021)
- fix: updateSlidesBuffer
v0.1.14 (04/04/2021)
- update
v0.1.13 (03/22/2021)
- feat: bind carousel data to slots
Download Details:
Author: ismail9k
Live Demo: https://codepen.io/ismail9k/pen/BaLYeMa
Download Link: https://github.com/ismail9k/vue3-carousel/archive/master.zip
Official Website: https://github.com/ismail9k/vue3-carousel
Install & Download:
# Yarn
$ yarn add vue3-carousel
# NPM
$ npm i vue3-carousel