Modern Carousel Component For Vue 3

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:

Modern Carousel Component For Vue 3

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

You Might Be Interested In:

Add Comment