Home
Carousel & Slider
Modern Carousel Component For Vue 3

Modern Carousel Component For Vue 3

ismail9k Last Updated: 3 weeks ago

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:

Modern Carousel Component For Vue 3

Changelog:

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

Related Posts

Add Comment