Vue Splide

Vueインテグレーション

概要

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

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

インストール

最新版を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

イベント

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
で、実際に動作している例を見ることができ、それぞれのソースコードは以下の場所に置いてあります。