A slideshow component.
npm install @288-toolkit/slideshowA slideshow component.
Slideshow.svelteThe Slideshow component provides all of the logic to create your own slideshow. Simply put, it's a
controllable interval with next and previous functions to switch slides.
Note that this component renders no markup.
#### items
The items to loop over in the slideshow.
``ts`
export let items: Array
#### slideDuration
The duration of each individual slide, in milliseconds.
`ts`
export let slideDuration = 3500;
#### autoplay
Whether the slideshow should run on its own. If this is set to false, only clicking on aSlideshowButton will allow moving from slide to slide.
`ts`
export let autoplay = true;
#### loop
Whether the slideshow should go back to the first slide when doing next from the last slide; and,previous
conversely, whether the slideshow should go to the last slide when doing from the first
slide.
`ts`
export let loop = true;
#### startDelay
The delay in milliseconds before the slideshow starts.
`ts`
export let startDelay = 0;
- readonly item (T): The item currently shown by the slideshowindex
- readonly (number): The index of the item currently shown by the slideshow
`svelte`
{#key item}
Slide {item} {index}
{/key}
The SlideshowButton component must be a child of Slideshow. It renders a button that will either
move the slideshow to the previous or the next slide.
Usually, this button will be used twice: once for previous, and once more for next.
The direction of the button.
`ts`
export let direction: 'previous' | 'next';
Classes to apply to the button.
`svelte``