English

Svelte Splide

Svelteインテグレーション

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

概要

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

インストール

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

$ npm install @splidejs/svelte-splide

使用方法

コンポーネントの登録

パッケージから、SplideとSplideSlideの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
before-track

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

after-track

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

before-slider

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

after-slider

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

イベント

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

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

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

Svelteのイベントハンドラは複数の引数を受け付けないため、ネイティブのCustomEventと同様detailオブジェクトから取得する必要があります。このオブジェクトには、splideとしてSplideのインスタンスそのものも含まれています。たとえば、on:arrowsMountedのdetailは、splide、prev、nextの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-splide';
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