Svelte Splide

Svelteインテグレーション

概要

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

インストール

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

$ npm install @splidejs/svelte-splide

使用方法

コンポーネントの登録

パッケージから、SplideSplideSlideの2つのコンポーネントをインポートします。

import { Splide, SplideSlide } from '@splidejs/svelte-splide';
JavaScript

これらを、以下のようにしてレンダリングしてください。

<Splide>
<SplideSlide>
<img src="image1.jpg" alt="Image 1"/>
</SplideSlide>
<SplideSlide>
<img src="image2.jpg" alt="Image 2"/>
</SplideSlide>
</Splide>
Svelte

CSS

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

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

Props

id

id: string

ルート要素のIDを決めます。


options

options: Options

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

<Splide
options={ {
rewind: true,
width : 800,
gap : '1rem',
} }
>
</Splide>
Svelte

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


extensions

Extensions: Record<string, ComponentConstructor>

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


transition

Transition: ComponentConstructor

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


hasSliderWrapper

hasSliderWrapper: boolean

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

スロット

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

<Splide>
...
<div class="splide__autoplay" slot="after-track">
<button class="splide__play">Play</button>
<button class="splide__pause">Pause</button>
</div>
</Splide>
Svelte

イベント

Splideコンポーネント経由で、Splide内のすべてのイベントにハンドラを登録することができます。ハンドラの関数名はイベント名から生成されますが、キャメルケースへの変換、コロンの削除という2つの処理が行われます。たとえば、"arrows:mounted"は"arrowsMounted"に変換されます。

実際のイベントリストは、から確認することができます。

<Splide on:arrowsMounted={ e => { console.log( e.detail.prev ) } }>
Svelte

Svelteのイベントハンドラは複数の引数を受け付けないため、ネイティブのCustomEventと同様detailオブジェクトから取得する必要があります。このオブジェクトには、splideとしてSplideのインスタンスそのものも含まれています。たとえば、on:arrowsMounteddetailは、splideprevnextの3つのプロパティをもっています。

Splideインスタンスの取得

Splideインスタンスを取得し直接操作したい場合は、Splideコンポーネントのthisを利用します。

<Splide bind:this={ mySlider }>
...
</Splide>
Svelte

SvelteがSplideコンポーネントをマウントした後、mySlider.splideを介してインスタンスを取得できます(マウント前はundefinedです)。

onMount( () => {
console.log( mySlider.splide );
} );
Svelte

サンプル

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

<script>
import { Splide, SplideSlide } from '@splidejs/svelte-slide';
import '@splidejs/splide/dist/css/themes/splide-default.min.css';
</script>
<Splide options={ { rewind: true } }>
<SplideSlide>
<img src="image1.jpg" alt="Image 1"/>
</SplideSlide>
<SplideSlide>
<img src="image2.jpg" alt="Image 2"/>
</SplideSlide>
</Splide>
Svelte
で、実際に動作している例を見ることができ、それぞれのソースコードは以下の場所に置いてあります。