Svelte Splide

Svelteインテグレーション

概要

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

v0.2.0以上のドキュメントです。

インストール

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

$ npm install @splidejs/svelte-splide

使用方法

コンポーネントの登録

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

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

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

<Splide aria-label="お気に入りの写真">
<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/svelte-splide/css';
// または、ほかのテーマ
import '@splidejs/svelte-splide/css/skyblue';
import '@splidejs/svelte-splide/css/sea-green';
// あるいは、コアスタイルのみ
import '@splidejs/svelte-splide/css/core';
JavaScript

構成のカスタマイズ

<Splide>はトラック要素をレンダリングしますが、hasTrack<SplideTrack>を用いれば、別々に管理できます。例えば、次の2つのコンポーネントは、全く同じ結果を出力します。

<Splide>
<SplideSlide>...</SplideSlide>
</Splide>
<Splide hasTrack={ false }>
<SplideTrack>
<SplideSlide>...</SplideSlide>
</SplideTrack>
</Splide>
Svelte

<SplideTrack><Splide>から分離することで、矢印ページネーション、あるいはそのほかのコントロール要素を自由に配置できるようになります。例えば、Splideはデフォルトで、矢印をトラック要素の直前にレンダリングしますが、プレースホルダを用いてこの位置を指定できます。

<Splide hasTrack={ false } aria-label="...">
<div class="custom-wrapper">
<SplideTrack>
<SplideSlide>...</SplideSlide>
</SplideTrack>
<div class="splide__arrows" />
</div>
</Splide>
Svelte

または、独自の矢印も定義できます。

<Splide hasTrack={ false } aria-label="...">
<SplideTrack>
<SplideSlide>...</SplideSlide>
</SplideTrack>
<div class="splide__arrows">
<button class="splide__arrow splide__arrow--prev">Prev</button>
<button class="splide__arrow splide__arrow--next">Next</button>
</div>
</Splide>
Svelte

同じようにして、自動再生のトグルボタンや、プログレスバーの表示も行えます。

<Splide hasTrack={ false } aria-label="...">
<SplideTrack>
<SplideSlide>...</SplideSlide>
</SplideTrack>
<div class="splide__progress">
<div class="splide__progress__bar" />
</div>
<button class="splide__toggle" type="button">
<span class="splide__toggle__play">Play</span>
<span class="splide__toggle__pause">Pause</span>
</button>
</Splide>
Svelte

あるいは:

<Splide hasTrack={ false } aria-label="...">
<div class="custom-wrapper">
<button class="splide__toggle" type="button">
<span class="splide__toggle__play">Play</span>
<span class="splide__toggle__pause">Pause</span>
</button>
<div class="splide__progress">
<div class="splide__progress__bar" />
</div>
<SplideTrack>
<SplideSlide>...</SplideSlide>
</SplideTrack>
</div>
</Splide>
Svelte

Props

<Splide>コンポーネントは、一般的なHTMLのプロパティを受け取り、スライダーのルート要素に渡します。例えばclassaria-labelを設定できます。

<Splide class="my-carousel" aria-label="お気に入りの写真">
</Splide>
Svelte

加えて、以下で述べるいくつかのプロパティを取ります。


options

options: Options

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

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

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


extensions

Extensions: Record<string, ComponentConstructor>

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


transition

Transition: ComponentConstructor

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


hasTrack

hasTrack: boolean

トラック要素をレンダリングするかどうかを決めます。

イベント

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-splide';
import '@splidejs/splide/dist/css/themes/splide-default.min.css';
</script>
<Splide options={ { rewind: true } } aria-label="お気に入りの写真">
<SplideSlide>
<img src="image1.jpg" alt="Image 1"/>
</SplideSlide>
<SplideSlide>
<img src="image2.jpg" alt="Image 2"/>
</SplideSlide>
</Splide>
Svelte

このページで、実際に動作している例を見ることができ、それぞれのソースコードは以下の場所に置いてあります。

Migrating from v3

v3からv4へ移行するには、次の手順を参考にしてください。

  1. 破壊的変更に目を通します
  2. もしこれらの変更が既存のスライダーに影響を与える場合は、v3からv4への移行を参考に「スライダー要素」以外を修正します
  3. 下に記載した「廃止されたスロット」を利用している場合は、構成のカスタマイズを参考に、コンポーネントをアップデートします
  4. CSSを更新します(古いパスのままでも動作しますが、短縮パスも利用可能になりました)
  5. (任意)あたらしく追加されたi18nを翻訳します
  6. (任意)aria-labelまたはaria-labelledbyをそれぞれのスライダーに挿入します

以下のスロットは廃止されました。

  • before-track
  • after-track
  • before-slider
  • after-slider