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-splideRegistration
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:
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:[]