日本語

Svelte Splide

You're browsing the documentation for v3

Introduction

Svelte Splide is a Svelte component for a Splide slider/carousel.

Installation

Get the latest version by NPM:

$ npm install @splidejs/svelte-splide

Usage

Components

Import Splide and SplideSlide components:

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

and render them like this:

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

CSS

Select a CSS file you want to use, and import it:

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


// or
import '@splidejs/splide/dist/css/themes/splide-skyblue.min.css';
JavaScript

Props

id

id: string

Determines the ID of the slider root element.

options

options: Options

Splide options as an object:

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

This property is reactive, which means if you change values, the component will also update the slider. But do not change readonly options, or the slider will be broken.

extensions

Extensions: Record<string, ComponentConstructor>

Registers extensions as an object literal.

transition

Transition: ComponentConstructor

Registers the custom transition component.

hasSliderWrapper

hasSliderWrapper: boolean

Determines whether to wrap the track by the slider element.

Slots

Several slots are available to render additional elements, such as custom arrows.

<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

Located before the track element

after-track

Located after the track element

before-slider

Located before the track element. Available only when the hasSliderWrapper prop is true.

after-slider

Located after the track element. Available only when the hasSliderWrapper prop is true.

Events

You can listen to all Splide events through the Splide component. The event is generated by the original name with converting the format to the camelcase and removing colons. For example, "arrows:mounted" becomes "arrowsMounted". You can see the event list in this file.

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

Because the Svelte event handler does not accept multiple arguments, all parameters from the Splide event are packed into the detail object. It also contains the splide instance itself. For example, the detail of the on:arrowsMounted event includes splide, prev and next properties.

Accessing Splide Instance

You can access the splide instance from this:

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

After Svelte mounts the Splide component, the splide instance is available on mySlider.splide.

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

Example

Here is a small example:

<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