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, },
Preview:
Changelog:
v0.1.11 (02/21/2021)
- Update
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