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>