Splide Carousel & Slider Component For Vue

Install & Download:

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

Description:

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: {
    Splide,
    SplideSlide,
  },
}

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.

<splide>
  <splide-slide>
    <img src="1.jpg">
  </splide-slide>
  <splide-slide>
    <img src="2.jpg">
  </splide-slide>
  <splide-slide>
    <img src="3.jpg">
  </splide-slide>
</splide>

export default { 
  data() {
    return {
      options: {
        // options here
      },
    };
  },
}

4. Refer to the Splide documentation for full options.

Preview:

Changelog:

v0.6.12 (09/30/2022)

• Update the Splide version.