vue-splide's Introduction

Vue Splide

Vue Splide is the Splide component for Vue.

Installation

Get the latest version by NPM:

$ npm install @splidejs/vue-splide

Registration

Global Registration

Import vue-splide and install into Vue:

import Vue from 'vue';
import App from './App';
import VueSplide from '@splidejs/vue-splide';

Vue.use( VueSplide );

new Vue( {
  el    : '#app',
  render: h => h( App ),
} );

Local Registration

Import Splide and SplideSlide components:

import { Splide, SplideSlide } from '@splidejs/vue-splide';

export default {
  components: {
    Splide,
    SplideSlide,
  },
}

CSS

Import styles if you need.

import '@splidejs/splide/dist/css/themes/splide-default.min.css';
// or
import '@splidejs/splide/dist/css/themes/splide-sea-green.min.css';
// or
import '@splidejs/splide/dist/css/themes/splide-skyblue.min.css';

Options

The Splide component accepts options as an object:

<splide :options="yourOptions"></splide>

Listening to Events

You can listen to all Splide events through the Splide component. The callback function name is generated by the original event name, adding a "splide:" prefix. For example, "arrow:mounted" will be "splide:arrow:mounted".

<splide @splide:arrow:mounted="onArrowMounted"></splide>

Note that the first argument is the splide instance, meaning original arguments are shifted by one.

Examples

Here is a small example:

<template>
  <splide :options="options">
    <splide-slide>
      <img src="image1.jpg">
    </splide-slide>
    <splide-slide>
      <img src="image2.jpg">
    </splide-slide>
    <splide-slide>
      <img src="image3.jpg">
    </splide-slide>
  </splide>
</template>

<script>
  export default { 
    data() {
      return {
        options: {
          rewind : true,
          width  : 800,
          gap    : '1rem',
        },
      };
    },
  }
</script>