Vue Splide – Splide

Vue Splide is the Splide component for Vue. It makes easier to create a Splide slider or carousel for your Vue project.

Installation

Get the latest version by NPM:

$ npm install @splidejs/vue-splide

Registration

Global Registration

Import vue-splide and install it 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';

Examples

Here are working examples:

Basic Usage

Markup

Add a splide element for wrappers and splide-slide elements for slides:

<splide>
  <splide-slide>
    <img src="image01.jpg">
  </splide-slide>
  <splide-slide>
    <img src="image02.jpg">
  </splide-slide>
  <splide-slide>
    <img src="image03.jpg">
  </splide-slide>
</splide>

Options

To change default options, pass an object to the splide component as a prop:

<template>
  <splide :options="options">
		<splide-slide>
			<img src="image01.jpg">
		</splide-slide>
		<splide-slide>
			<img src="image02.jpg">
		</splide-slide>
  </splide>
</template>

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

See this document for more available options.

Listening to Events

You can listen to all Splide events as the Vue way but there are 2 things to be aware of:

“splide” prefix is added to the original event name
The first argument of a callback is a splide instance and original arguments are shifted by one

Here is the simple example:

<template>
	<splide
		@splide:mounted="onMounted"
		@splide:arrows:mounted="onArrowsMounted"
	>
		...
	</splide>
</template>

<script>
	export default {
		methods: {
			onMounted( splide ) {
				// do something
			},
			
			onArrowsMounted( splide, prev, next ) {
				// do something
			},
		},
	}
</script>

The list of events and their details are available on this page.

Custom Controls

If you want to add custom arrows or a progress bar for auto play, use controls slot like this:

<splide>
	<splide-slide v-for="slide in slides" :key="slide.src">
		<img :src="slide.src">
	</splide-slide>

	<template v-slot:controls>
		<div class="splide__progress">
			<div class="splide__progress__bar">
			</div>
		</div>
	</template>
</splide>

Dynamic Slides

By passing a slides prop and using the v-for directive, you can update slides dynamically:

<template>
  <splide :slides="slides">
    <splide-slide v-for="slide in slides" :key="slide.src">
      <img :src="slide.src">
    </splide-slide>
  </splide>
</template>

<script>
  export default {
	  data() {
		  return {
			  slides: [
					{ src: 'image01.jpg' },
					{ src: 'image02.jpg' },
					{ src: 'image03.jpg' },
				]
		  };
	  },
		
		mounted() {
			// Attept to add a slide.
			setTimeout( () => {
				this.slides.push( {
					src: 'image04.jpg',
				} );
			}, 5000 );
		},
  }
</script>

The splide component watches the slides prop, and calls remount() whenever the prop is changed.

Thumbnail Slider

To create a thumbnail slider as navigation for another, you need to call the sync method after components are mounted.

<template>
  <div>
		<!-- Main slider -->
    <splide :options="primaryOptions" ref="primary">
      ...
    </splide>

		<!-- Thumbnail slider -->
    <splide :options="secondaryOptions" ref="secondary">
			...
    </splide>
  </div>
</template>

<script>
  export default {
		data() {
			return {
        primaryOptions: {
	      	type      : 'loop',
		      width     : 800,
					pagination: false,
	      },
	      secondaryOptions: {
		      type        : 'slide',
		      rewind      : true,
		      width       : 800,
		      gap         : '1rem',
					pagination  : false,
		      fixedWidth  : 110,
          fixedHeight : 70,
          cover       : true,
		      focus       : 'center',
		      isNavigation: true,
	      },
			};
		},
		
		mounted() {
		  // Set the sync target.
      this.$refs.primary.sync( this.$refs.secondary.splide );
    },
	}
</script>

Props

Here is a list of props for the Splide component.

`options`

Options for Splide as an object.

type: Object default: {}

`slides`

An object containing slide data. It will be watched so that Vue renders the Slider again. See this section.

type: Array default:[]

`hasSliderWrapper`

Whether to wrap a track by a slider element.

type: String default: ''