Modern Lightweight Vue 3 Carousel Component Plugin

Vue 3 Carousel is a lightweight circular component, talk and respond to VUE.JS 3 applications.

vue carousel, vue product carousel, vuesax carousel, v carousel example, vue carousel with thumbnails, vue dynamic carousel, vue card carousel

An Accessible Touch-enabled Slider Web Component | fg-carousel

Table of Contents

How to make use of it:

Install and download:

# Yarn
$ yarn add vue3-carousel

# NPM
$ npm i vue3-carousel

1. Import and register component.

import 'vue3-carousel/dist/carousel.css';
import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel';

export default {
  components: {
    Carousel,
    Slide,
    Pagination,
    Navigation,
  },
};

2. Add a Carousel component to the application.

<template>
  <carousel>
    <slide v-for="slide in 10" :key="slide">{{ slide }}</slide>
    <template #addons>
      <navigation />
    </template>
  </carousel>
</template>

3. Possible props to customize circular.

// 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,
},

Available Props

Prop	Default	Description
`itemsToShow`	1	count of items to showed per view (can be a fraction).
`itemsToScroll`	1	number of slides to be scrolled
~~`currentSlide`~~	0	~~index number of the initial slide.~~ Deprecated 0.1.20
`wrapAround`	false	enable infinite scrolling mode.
`snapAlign`	‘center’	controls the carousel position alignment, can be ‘start’, ‘end’, ‘center[-odd\|-even]’
`transition`	300	sliding transition time in ms.
`autoplay`	0	Auto play time in ms.
`settings`	{ }	an object to pass all settings.
`breakpoints`	null	an object to pass all the breakpoints settings.
`modelValue`	0	index number of the initial slide. 0.1.20
`mouseDrag`	true	toggle mouse dragging 0.1.23
`touchDrag`	true	toggle pointer touch dragging 0.1.23
`pauseAutoplayOnHover`	true	toggle if auto play should pause on mouse hover 0.1.25