Motion Core

Slideshow

Slideshow delivers a premium viewing experience with cinematic parallax transitions. It features a synchronized thumbnail navigator and smooth GSAP-powered animations that bring static images to life.

Installation

Install the component

Run the following command to install the component and its dependencies:
npx @motion-core/cli add slideshow

Import the component

Import the component into your Svelte file: 
import { Slideshow } from "$lib/motion-core";
import { Slideshow } from "$lib/motion-core";

Usage

Alt 1
Alt 2
Alt 3
<script lang="ts">
	import { Slideshow } from "motion-core";

	const images = [
		{
			src: "/images/demos/sample-1.jpg",
			alt: "Alt 1",
		},
		{
			src: "/images/demos/sample-2.jpg",
			alt: "Alt 2",
		},
		{
			src: "/images/demos/sample-3.jpg",
			alt: "Alt 3",
		},
	];
</script>

<Slideshow class="h-full min-h-96 w-full" {images} />

Props

Slideshow

PropTypeDefault
images
{src: string, alt?: string}[] —
class
string ""