Splide Carousel & Slider Component For Vue

A Vue wrapper around the Splide library that enables developers to create lightweight, powerful, and flexible slider and carousel in Vue.js.

How to use it:

1. Import and register the VueSplide into your Vue project.

import Vue from 'vue';

// globally
import VueSplide from '@splidejs/vue-splide';
Vue.use( VueSplide );

// locally
import { Splide, SplideSlide } from '@splidejs/vue-splide';
export default {
  components: {

2. Import a theme of your choice as follows:

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

3. Create a basic carousel.

    <img src="1.jpg">
    <img src="2.jpg">
    <img src="3.jpg">
export default { 
  data() {
    return {
      options: {
        // options here

4. Refer to the Splide documentation for full options.


Splide Carousel & Slider Component For Vue


v0.6.12 (09/30/2022)

  • Update the Splide version.

Download Details:

Author: Splidejs

Live Demo: https://splidejs.github.io/vue-splide/

Download Link: https://github.com/Splidejs/vue-splide/archive/master.zip

Official Website: https://github.com/Splidejs/vue-splide

Install & Download:

$ npm i @splidejs/vue-splide --save

Add Comment