svelte-splide
v1.0.2
Published
The Splide component for Svelte.
Downloads
14
Maintainers
Readme
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>