Modern Carousel Component For Vue 3

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.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