A slideshow component.
The 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.
The items to loop over in the slideshow.
export let items: Array<T>;The duration of each individual slide, in milliseconds.
export let slideDuration = 3500;Whether the slideshow should run on its own. If this is set to false, only clicking on a
SlideshowButton will allow moving from slide to slide.
export let autoplay = true;Whether the slideshow should go back to the first slide when doing next from the last slide; and,
conversely, whether the slideshow should go to the last slide when doing previous from the first
slide.
export let loop = true;The delay in milliseconds before the slideshow starts.
export let startDelay = 0;- readonly
item(T): The item currently shown by the slideshow - readonly
index(number): The index of the item currently shown by the slideshow
<Slideshow items={[1, 2, 3, 4]} let:item let:index>
{#key item}
<div class="bg-[red]" transition:fade>Slide {item} {index}</div>
{/key}
</Slideshow>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.
export let direction: 'previous' | 'next';Classes to apply to the button.
<SlideshowButton direction="next">Next</SlideshowButton>