Description:
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,
},
// slide number number of initial slide
currentSlide: {
default: 0,
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,
},Preview:
Changelog:
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