Motion Core

Showcase

Slideshow

A full-bleed gallery featuring parallax transitions and a synchronized thumbnail navigator.

gsap

Installation

Install the component

Run the following command to install the component and its dependencies: 
npx @motion-core/cli add slideshow
npx @motion-core/cli add slideshow
pnpm dlx @motion-core/cli add slideshow
pnpm dlx @motion-core/cli add slideshow
bunx @motion-core/cli add slideshow
bunx @motion-core/cli add slideshow
yarn dlx @motion-core/cli add slideshow
yarn dlx @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/photos/sample-image-1.webp",
			alt: "Alt 1",
		},
		{
			src: "/images/photos/sample-image-2.webp",
			alt: "Alt 2",
		},
		{
			src: "/images/photos/sample-image-3.webp",
			alt: "Alt 3",
		},
	];
</script>

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

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

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

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

Props

Slideshow

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