A powerful and flexible slider and carousel for vue.js

by Vue.js Examples

Vue Splide

Vue Splide is the Splide component for Vue.

View Demo View Github

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 and Props

The Splide component accepts options as an object:

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

Also, you can pass extensions or transition as props.

<splide
  :extensions="yourExtensions"
  :transition="yourTransition"
>
</splide>

See this document for more details.

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>

More examples:

GitHub