Full Featured Carousel Component For Vue.js 3

Install & Download:

# NPM
$ npm i vue @vue/compiler-sfc @chenfengyuan/vue-carousel

Description:

A full featured, highly customizable, mobile-friendly carousel (slider) component designed for Vue.js 3 apps.

How to use it:

1. Import and register the carousel component.

import Vue from 'vue';
import VueCarousel from '@chenfengyuan/vue-carousel';
const app = Vue.createApp({});
app.component(VueCarousel.name, VueCarousel);

2. Add the carousel component to the app template.

<template>
  <vue-carousel :data="data"></vue-carousel>
</template>

3. Add slides to the carousel.

export default {
  data() {
    return {
      data: [
        '<div class="slide">Slide 1</div>',
        '<div class="slide">Slide 2</div>',
        '<div class="slide">Slide 3</div>',
      ],
    };
  },
};

4. Apply your own styles to the slides.

.slide {
  align-items: center;
  background-color: #222;
  color: #fff;
  display: flex;
  justify-content: center;
}

5. Possible component props to customize the carousel.

autoplay: {
  type: Boolean,
  default: true,
},
controls: { // false, true, hover
  type: [Boolean, String],
  default: 'hover',
},
data: {
  type: Array,
  default: undefined,
},
direction: { // left, right, up, down
  type: String,
  default: 'left',
},
indicators: { // false, true, hover
  type: [Boolean, String],
  default: true,
},
indicatorTrigger: { // click, hover
  type: String,
  default: 'click',
},
indicatorType: { // line, disc  
  type: String,
  default: 'line',
},
interval: {
  type: Number,
  default: 5000,
},
pauseOnEnter: {
  type: Boolean,
  default: true,
},
slideOnSwipe: {
  type: Boolean,
  default: true,
},
tag: {
  type: String,
  default: 'div',
},

6. API methods.

// play 
play();
// pause
stop();
// back to the prev slide
prev();
// go to the next slide
next();
// slide to a specific slide
slideTo(index);

7. Events.

// when the slide transition starts.
@slide(newIndex, oldIndex)
// after the slide transition has completed.
@slid(newIndex, oldIndex)

Preview:

Changelog:

v2.0.0 (02/07/2022)

• Upgrade to Vue 3.