v-slideshow

A slideshow for Vue.js focused on custom transitions and layout

Usage no npm install needed!

<script type="module">
  import vSlideshow from 'https://cdn.skypack.dev/v-slideshow';
</script>

README

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

Basic usage: 
<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

Nav

The content for the nav.

slot props

Same as default slot except that there is no slide or index.

Methods

If you save a reference of VSlideshow (<VSlideshow ref="mySlideshow">), you will have access to some methods:

  • prev
  • next
  • goTo (arguments: index {number})

They all returns a promise resolved when the transition is done.

Examples

You can see some examples in the folder examples.

npm run serve