Svelte Splide

Svelte Splide is the Splide component for Svelte

Demo

You can test the demo here.

Installation

Get the latest version from NPM:

npm install svelte-splide

Import

Remember to link the base Splide stylesheet:

<link rel="stylesheet" href="node_modules/@splidejs/splide/dist/css/splide.min.css">

Or if you are using PostCSS:

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

Usage

In your Svelte component:

<script>
  import { Splide, SplideSlide } from "svelte-splide";
</script>

<Splide>
  <SplideSlide>
    <img src="https://via.placeholder.com/540x360" alt="" />
  </SplideSlide>
  <SplideSlide>
    <img src="https://via.placeholder.com/540x360" alt="" />
  </SplideSlide>
  <SplideSlide>
    <img src="https://via.placeholder.com/540x360" alt="" />
  </SplideSlide>
</Splide>

Props

You can pass all base Splide options using the options prop:

<script>
  import { Splide, SplideSlide } from "svelte-splide";

  const options = {
    arrows: true,
    pagination: false,
    autoWidth: true,
    rewind: false,
    gap: 50
  };
</script>

<Splide {options}>
  <SplideSlide>
    <img src="https://via.placeholder.com/540x360" alt="" />
  </SplideSlide>
  <SplideSlide>
    <img src="https://via.placeholder.com/540x360" alt="" />
  </SplideSlide>
  <SplideSlide>
    <img src="https://via.placeholder.com/540x360" alt="" />
  </SplideSlide>
</Splide>

As well as extensions and transition:

<script>
  import { Splide, SplideSlide } from "svelte-splide";

  let extensions = {};
  let transition = null;
</script>

<Splide {extensions} {transition}>
  <SplideSlide>
    <img src="https://via.placeholder.com/540x360" alt="" />
  </SplideSlide>
  <SplideSlide>
    <img src="https://via.placeholder.com/540x360" alt="" />
  </SplideSlide>
  <SplideSlide>
    <img src="https://via.placeholder.com/540x360" alt="" />
  </SplideSlide>
</Splide>

To get the Splide instance, bind to the splide prop:

<script>
  import { Splide, SplideSlide } from "svelte-splide";

  let splide;
</script>

<Splide bind:splide>
  <SplideSlide>
    <img src="https://via.placeholder.com/540x360" alt="" />
  </SplideSlide>
  <SplideSlide>
    <img src="https://via.placeholder.com/540x360" alt="" />
  </SplideSlide>
  <SplideSlide>
    <img src="https://via.placeholder.com/540x360" alt="" />
  </SplideSlide>
</Splide>

You can also bind to the current index:

<script>
  import { Splide, SplideSlide } from "svelte-splide";

  let currentIndex;
</script>

<p>Current index: {currentIndex}</p>

<Splide bind:currentIndex>
  <SplideSlide>
    <img src="https://via.placeholder.com/540x360" alt="" />
  </SplideSlide>
  <SplideSlide>
    <img src="https://via.placeholder.com/540x360" alt="" />
  </SplideSlide>
  <SplideSlide>
    <img src="https://via.placeholder.com/540x360" alt="" />
  </SplideSlide>
</Splide>

Additions

In addition to every base Splide feature, svelte-splide supports:

Hiding arrows automatically:

<script>
  import { Splide, SplideSlide } from "svelte-splide";
</script>

<Splide autoHideArrows autoHideArrowsOffset={0}>
  <SplideSlide>
    <img src="https://via.placeholder.com/540x360" alt="" />
  </SplideSlide>
  <SplideSlide>
    <img src="https://via.placeholder.com/540x360" alt="" />
  </SplideSlide>
  <SplideSlide>
    <img src="https://via.placeholder.com/540x360" alt="" />
  </SplideSlide>
</Splide>

Group syncing:

<script>
  import { Splide, SplideSlide } from "svelte-splide";
</script>

<Splide group="demo">
  <SplideSlide>
    <img src="https://via.placeholder.com/540x360" alt="" />
  </SplideSlide>
  <SplideSlide>
    <img src="https://via.placeholder.com/540x360" alt="" />
  </SplideSlide>
  <SplideSlide>
    <img src="https://via.placeholder.com/540x360" alt="" />
  </SplideSlide>
</Splide>
<br/>
<Splide group="demo">
  <SplideSlide>
    <img src="https://via.placeholder.com/540x360" alt="" />
  </SplideSlide>
  <SplideSlide>
    <img src="https://via.placeholder.com/540x360" alt="" />
  </SplideSlide>
  <SplideSlide>
    <img src="https://via.placeholder.com/540x360" alt="" />
  </SplideSlide>
</Splide>
<br/>
<Splide group="demo">
  <SplideSlide>
    <img src="https://via.placeholder.com/540x360" alt="" />
  </SplideSlide>
  <SplideSlide>
    <img src="https://via.placeholder.com/540x360" alt="" />
  </SplideSlide>
  <SplideSlide>
    <img src="https://via.placeholder.com/540x360" alt="" />
  </SplideSlide>
</Splide>

Splides in the same group will move together. You can have as many groups as you like.

NOTE: splides in the same group must have the same number of slides.