fnzr / vue-splide

The Splide component for Vue.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Vue Splide

Vue Splide is the Splide component for Vue.

Installation

Get the latest version by NPM:

$ npm install @splidejs/vue-splide

Registration

Global Registration

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

Options and Props

The Splide component accepts options as an object:

<splide :options="yourOptions"></splide>

Also, you can pass extensions or transition as props.

<splide
  :extensions="yourExtensions"
  :transition="yourTransition"
>
</splide>

See this document for more details.

Listening to Events

You can listen to all Splide events through the Splide component. The callback function name is generated by the original event name, adding a "splide:" prefix. For example, "arrow:mounted" will be "splide:arrow:mounted".

<splide @splide:arrow:mounted="onArrowMounted"></splide>

Note that the first argument is the splide instance, meaning original arguments are shifted by one.

Examples

Here is a small example:

<template>
  <splide :options="options">
    <splide-slide>
      <img src="image1.jpg">
    </splide-slide>
    <splide-slide>
      <img src="image2.jpg">
    </splide-slide>
    <splide-slide>
      <img src="image3.jpg">
    </splide-slide>
  </splide>
</template>

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

More examples:

License

Vue Splide and Splide are released under the MIT license.
© 2020 Naotoshi Fujita

About

The Splide component for Vue.

License:MIT License


Languages

Language:Vue 59.1%Language:JavaScript 40.9%