V-slideshow NPM

VSlideshow

VSlideshow is a customizable carousel. Focus on the transitions and the layout, VSlideshow will take care of the rest Under the hood, VSlideshow uses the built-in component <TransitionGroup> from Vue.js.

Download and import | Getting started | Examples

Download and import

npm i v-slideshow

Globally:

import Vue from 'vue';
import VSlideshow from 'v-slideshow';

Vue.use('VSlideshow', VSlideshow);

In component:

import VSlideshow from 'v-slideshow';

export default {
  components: { VSlideshow },
};

Via script:

<script src="https://unpkg.com/v-slideshow"></script>

Getting started

<div>
  <VSlideshow :slides="slides" @enter="enter" @leave="leave">
    <!-- Content inside a slide -->
    <template v-slot="{ slide }">
      <div>{{ slide.text }}</div>
    </template>

    <!-- Nav for the slideshow -->
    <template v-slot:nav="{ prev, next }">
      <button @click="prev">previous</button>
      <button @click="next">next</button>
    </template>
  </VSlideshow>
</div>

<script>
  import VSlideshow from '../src/v-slideshow';

  export default {
    components: { VSlideshow },

    data() {
      return {
        slides: [
          { id: 'slide-0', text: 'Slide 0' },
          { id: 'slide-1', text: 'Slide 1' },
          { id: 'slide-2', text: 'Slide 2' },
          { id: 'slide-3', text: 'Slide 3' },
          { id: 'slide-4', text: 'Slide 4' },
          { id: 'slide-5', text: 'Slide 5' },
        ],
      };
    },

    methods: {
      leave(data, done) {
        done();
      },

      enter(data, done) {
        done();
      },
    },
  };
</script>

API

Props

Property	Description	Type	Default
value	The index of the current slide	Number	`0`
slides	An array of slides	Array	`required`
loop	Make a loop whenever the slideshow reaches the end	Boolean	`true`
safe	Prevents the slideshow to change the slide while there is a transition running	Boolean	`true`
listClass	Class list applied on the list of the slides	String, Array, Object	`null`
itemClass	Class list applied on each slide	String, Array, Object	`null`

⚠️ The prop slides must by an array of objects. Each slide must contain a unique ID because of TransitionGroup. nanoid is a good option if you need to generate an ID.

Events

Event	Description	Parameters
before-enter	Before slide enter	data: Object
enter	On slide enter, make sure to call `done` when the transition is done	data: Object done: Function
after-enter	After slide enter	data: Object
enter-cancelled	On cancellation of slide enter	data: Object
before-leave	Before slide leave	data: Object
leave	On slide leave, make sure to call `done` when the transition is done	data: Object done: Function
after-leave	After slide leave	data: Object
leave-cancelled	On cancellation of slide leave	data: Object
done	When enter and leave transitions are done	data: Object
input	When the current slide index changes	value: Number

Composition of `data`

Property	Description	Type
el	DOM element (not present for @done and @input)	DOM Element
previousIndex	The index of the previous slide	Number
currentIndex	The index of the current slide	Number
slides	The props `slides`	Array
total	The number of slides	Number
busy	Whether a transition is running	Boolean

Scoped slots

Default

The content for each slide.

slot props

Property	Description	Type
previousIndex	The index of the previous slide	Number
currentIndex	The index of the current slide	Number
total	The index of the previous slide	Number
busy	The index of the previous slide	Number
slides	The slides	Array
goTo	The method to go to a specific slide	Function
prev	The method to go to the previous slide	Function
next	The method to go to the next slide	Function
slide	The slide	Object
index	The index of the slide	Number