SLIDY
Simple, configurable & reusable carousel component built with SvelteJS.
Try the demo.
Getting started
The package is available via npm:
npm i svelte-slidy
REPL is available here.
Usage
To use Slidy use named import. The only required props are slides - an array
of objects with image related data:
<script>
import { Slidy } from "svelte-slidy";
const slides = [
{
id: 1,
src: "static/img/some-image.webp"
}
];
</script>
<Slidy {slides} />Options
Component's behaviour can be customized with object. All settings are broken
into 4 categories. Most of the options are self-explanatory. Each Slidy
instance should have it's own options.
Example with all available options and their default values:
<script>
import { Slidy } from "svelte-slidy";
const options = {
slides: [],
wrap: {
id: "",
width: "100%",
height: "50%",
padding: "0",
align: "middle",
alignmargin: 50,
},
slide: {
gap: 50,
class: "",
width: "50%",
height: "100%",
backimg: true,
imgsrckey: "src",
objectfit: "cover",
overflow: "hidden",
},
controls: {
dots: true,
dotsnum: true,
dotsarrow: true,
dotspure: false,
arrows: true,
keys: true,
drag: true,
wheel: true,
},
options: {
axis: "x",
loop: false,
duration: 550,
},
};
</script>
<Slidy {...options} />;Custom styling
To customize default Slidy nodes markup styles, provide an id use
:global() to get necessary specifity.
<script>
import { Slidy } from "svelte-slidy";
const options = {
slides: [],
id: "slidy-id"
};
</script>
<Slidy {...options} />
<style>
:global(#slidy-id) {
/* your CSS styling */
}
</style>Slidy's markup structure with it's classes:
<section id="yours custom #id" class="slidy">
<ul class="slidy-ul">
<!-- slides node -->
</ul>
<button class="arrow-left">
<!-- previous slide control node -->
</button>
<button class="arrow-right">
<!-- next slide control node -->
</button>
<ul class="slidy-dots">
<li class="dots-arrow-left">
<!-- next slide dots control node -->
</li>
<li>
<!-- dots node -->
</li>
<li class="dots-arrow-left">
<!-- previous slide dots control node -->
</li>
</ul>
</section>For example, to override styles of specific section, use the classes described above:
<style>
:global("slidy-instance-id" .dots-arrow-left) {
/* your custom CSS styles */
}
</style>External controls
It is possible to control Slidy instance from parent component. Declare the
variable to hold the index and bind it to the Slidy instance to control the
slides navigation.
<script>
import { Slidy } from "svelte-slidy";
const slides = [];
let index = 0;
</script>
<button on:click={() => index += 1}>
Next slide
</button>
<Slidy
bind:index
slides
/>Custom slides
Sometimes the default markup is not enough. For custom slides markup use
let:item directive:
<script>
import { Slidy } from "svelte-slidy";
const slides = [
{
id: 1,
src: "/img.webp",
figcaption: "Some text here"
}
];
</script>
<Slidy slides let:item>
<figure>
<img src={item.src} alt={item.figcaption}>
<figcaption>
{item.figcaption}
</figcaption>
</figure>
</Slidy>Custom nodes
Slidy supports customization of it's nodes via slots:
-
<slot />for slides; -
<slot name="loader" />for loading indicator; -
<slot name="arrow-left">for the previous slide control; -
<slot name="arrow-right">for the next slide control; -
<slot name="dots-arrow-left">for previous slide control at dots; -
<slot name="dots-arrow-right">for next slide control at dots; -
<slot name="dots">for custom dots controls.
Example:
<script>
import { Slidy } from "svelte-slidy";
const slides = [];
</script>
<Slidy slides>
<!-- custom dots indicators -->
<button slot="dot" />
</Slidy>SvelteKit
Important note: slots are not SSR compatible yet. Check if the code runs in the browser before render.
Example for svelte\kit users:
<script>
import { Slidy } from "svelte-slidy";
import { browser } from "$app/env";
const slides = [];
</script>
{#if browser}
<Slidy slides>
<!-- custom dots indicators -->
<button slot="dot" />
</Slidy>
{/if}License
MIT © Valexr
