English

Vue Splide

Vueインテグレーション

v3用のドキュメントを参照しています

概要

Vue SplideはSplideをVueプロジェクトに導入するためのパッケージです。

最新版はVue 3のみにしか対応していません。古いバージョン（0.3.5）を使用すればVue 2で動かすこともできますが、SSRの問題に注意してください。

インストール

最新版をNPMから取得してください。

$ npm install @splidejs/vue-splide

使用方法

コンポーネントの登録

VueSplideプラグインをアプリケーションにインストールしてください。

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

あるいは、コンポーネントに直接SplideおよびSplideSlideを登録してもかまいません。

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


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

登録したら、以下のようにしてスライダーをレンダリングします。

<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

CSSファイルを選択し、インポートしてください。<link>タグで読み込んでも構いません。

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


// または
import '@splidejs/splide/dist/css/themes/splide-skyblue.min.css';
JavaScript

Props

options

options: Options

Splideのオプション をオブジェクトで渡します。

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

このプロパティはリアクティブであり、値を更新するとスライダー自身も更新されますが、読み取り専用のオプションは変更しないでください。

extensions

extensions: Record<string, ComponentConstructor>

エクステンションをオブジェクト形式で追加します。

transition

transition: ComponentConstructor

トランジションコンポーネントを上書きます。

hasSliderWrapper

hasSliderWrapper: boolean

トラック要素をスライダー要素で囲むかどうかを決めます。

スロット

スライダー内に追加で要素をレンダリングする目的で、いくつかのスロットが用意されています。たとえば矢印をカスタマイズする場合などに用います。

<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

トラック要素の前に位置する

after-track

トラック要素の後に位置する

before-slider

スライダー要素の前に位置する。hasSliderWrapperがtrueの場合のみ使用可能

after-slider

スライダー要素の後に位置する。hasSliderWrapperがtrueの場合のみ使用可能

イベント

Splideコンポーネント経由で、Splide内のすべてのイベントにハンドラを登録できます。ハンドラの関数名はイベント名から生成されますが、先頭に"splide"が付加されます。たとえば、"arrows:mounted"は"splide:arrows:mounted"に変換されます。

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

なお、ハンドラの第一引数は常にSplideのインスタンスで、オリジナルの引数はそのあとに続きます。

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

Splideインスタンスの取得

Splideインスタンスを取得し直接操作したい場合は、Refオブジェクトを利用します。

<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

VueがSplideコンポーネントをマウントした後、ref.value.splideを介してインスタンスを取得できます（マウント前はundefinedです）。

サンプル

以下に簡単な例を示します。

<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