日本語

Vue Splide

You're browsing the documentation for v3

Introduction

Vue Splide is a Vue component for a Splide slider/carousel.

The latest version only supports Vue 3. The old version (0.3.5) works for Vue 2, but it has the SSR issue.

Installation

Get the latest version by NPM:

$ npm install @splidejs/vue-splide

Usage

Registration

Import the VueSplide plugin and install it into your app:

import { createApp } from 'vue';
import App from './App.vue';
import VueSplide from '@splidejs/vue-splide';


const app = createApp( App );
app.use( VueSplide );
app.mount( '#app' );
JavaScript

or locally import Splide and SplideSlide components:

<script>
import { Splide, SplideSlide } from '@splidejs/vue-splide';


export default defineComponent( {
  components: {
    Splide,
    SplideSlide,
  },
} );
</script>
Vue

And then, render the slider like this:

<template>
  <Splide :options="{ rewind: true }">
    <SplideSlide>
      <img src="image1.jpg" alt="Sample 1">
    </SplideSlide>
    <SplideSlide>
      <img src="image2.jpg" alt="Sample 2">
    </SplideSlide>
  </Splide>
</template>
Vue

CSS

Select a CSS file you want to use, and import it:

import '@splidejs/splide/dist/css/splide.min.css';


// or
import '@splidejs/splide/dist/css/themes/splide-skyblue.min.css';
JavaScript

Props

options

options: Options

Splide options as an object:

<Splide :options="yourOptions"></Splide>
Vue

This property is reactive, which means if you change values, the component will also update the slider. But do not change readonly options, or the slider will be broken.

extensions

extensions: Record<string, ComponentConstructor>

Registers extensions as an object literal.

transition

transition: ComponentConstructor

Registers the custom transition component.

hasSliderWrapper

hasSliderWrapper: boolean

Determines whether to wrap the track by the slider element.

Slots

Several slots are available to render additional elements, such as custom arrows.

<Splide>
  ...


  <template #after-track>
    <div class="splide__autoplay">
      <button class="splide__play">Play</button>
      <button class="splide__pause">Pause</button>
    </div>
  </template>
</Splide>
Vue
before-track

Located before the track element

after-track

Located after the track element

before-slider

Located before the slider element. Available only when the hasSliderWrapper prop is true.

after-slider

Located after the slider element. Available only when the hasSliderWrapper prop is true.

Events

You can listen to all Splide events through the Splide component. The event name is generated by the original name with adding the "splide" prefix to avoid collision against native events. For example, "arrows:mounted" becomes "splide:arrows:mounted".

<Splide @splide:arrows:mounted="onArrowsMounted"></Splide>
Vue

Note that the handler always takes the splide instance as the first argument, and original arguments after it.

function onArrowsMounted( splide, prev, next ) {
  console.log( splide.length );
}
JavaScript

Accessing Splide Instance

You can access the splide instance though a Ref object.

<template>
  <Splide ref="splide">
    ...
  </Splide>
</template>


<script>
import { onMounted, ref } from 'vue';


export default defineComponent( {
  setup() {
    const splide = ref();


    onMounted( () => {
      if ( splide.value && splide.value.splide ) {
        console.log( splide.value.splide.length );
      }
    } );


    return {
      splide,
    }
  },
} );
</script>
Vue

After Vue mounts the Splide component, the splide instance is available on ref.value.splide.

Example

Here is a small example:

<template>
  <Splide :options="options">
    <SplideSlide>
      <img src="image1.jpg" alt="Sample 1">
    </SplideSlide>
    <SplideSlide>
      <img src="image2.jpg" alt="Sample 2">
    </SplideSlide>
  </Splide>
</template>


<script>
import { Splide, SplideSlide } from '@splidejs/vue-splide';
import { defineComponent } from 'vue';


export default defineComponent( {
  components: {
    Splide,
    SplideSlide,
  },


  setup() {
    const options = {
      rewind: true,
      gap   : '1rem',
    };


    return { options };
  },
} );
</script>
Vue