Splide Carousel & Slider Component For Vue

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:

Splide Carousel & Slider Component For Vue

Changelog:

v0.5.14 (12/01/2021)

  • Update the Splide version.

v0.5.13 (11/22/2021)

  • Update the Splide version.

v0.5.11 (11/17/2021)

  • Update the Splide version.

v0.5.10 (11/16/2021)

  • Update the Splide version.

v0.5.8 (11/15/2021)

  • Update the Splide version.

v0.5.7 (11/11/2021)

  • Update the Splide version.

v0.5.6 (11/10/2021)

  • Update the Splide version and remove remount().

v0.5.5 (11/03/2021)

  • Update the Splide version.

v0.5.4 (10/21/2021)

  • Update the Splide version.

v0.5.3 (10/20/2021)

  • Update the Splide version.

v0.5.0 (10/16/2021)

  • Update the Splide instance when detecting change in options.

v0.4.2 (10/14/2021)

  • Splide v3 for Vue 3.

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
$ npm i @splidejs/vue-splide --save

You Might Be Interested In:

Add Comment