Glass Slideshow

Installation

Install the component

Run the following command to install the component and its dependencies:

npx @motion-core/cli add glass-slideshow

npx @motion-core/cli add glass-slideshow

Import the component

Import the component into your Svelte file:

import { GlassSlideshow } from "$lib/motion-core";

import { GlassSlideshow } from "$lib/motion-core";

Usage

Props

Transition Duration

2000ms

Intensity

1.000

Distortion

1.000

Chromatic Aberration

1.000

Refraction

1.000

Autoplay

Autoplay Interval

5000ms

<script lang="ts">
	import { GlassSlideshow } from "motion-core";
	import type { ComponentProps } from "svelte";

	type Props = Partial<ComponentProps<typeof GlassSlideshow>>;

	const images = [
		"/images/photos/sample-image-6.webp",
		"/images/photos/sample-image-7.webp",
		"/images/photos/sample-image-9.webp",
	];

	let {
		transitionDuration = 2000,
		intensity = 1,
		distortion = 1,
		chromaticAberration = 1,
		refraction = 1,
		autoplay = true,
		autoplayInterval = 5000,
	}: Props = $props();
</script>

<GlassSlideshow
	class="h-full min-h-96 w-full"
	{images}
	{transitionDuration}
	{intensity}
	{distortion}
	{chromaticAberration}
	{refraction}
	{autoplay}
	{autoplayInterval}
/>

<script lang="ts">
	import { GlassSlideshow } from "motion-core";
	import type { ComponentProps } from "svelte";

	type Props = Partial<ComponentProps<typeof GlassSlideshow>>;

	const images = [
		"/images/photos/sample-image-6.webp",
		"/images/photos/sample-image-7.webp",
		"/images/photos/sample-image-9.webp",
	];

	let {
		transitionDuration = 2000,
		intensity = 1,
		distortion = 1,
		chromaticAberration = 1,
		refraction = 1,
		autoplay = true,
		autoplayInterval = 5000,
	}: Props = $props();
</script>

<GlassSlideshow
	class="h-full min-h-96 w-full"
	{images}
	{transitionDuration}
	{intensity}
	{distortion}
	{chromaticAberration}
	{refraction}
	{autoplay}
	{autoplayInterval}
/>

Props

GlassSlideshow

Prop	Type	Default
`images`	`string[]`	`—`
`index`	`number`	`0`
`transitionDuration`	`number`	`2000`
`intensity`	`number`	`1.0`
`distortion`	`number`	`1.0`
`chromaticAberration`	`number`	`1.0`
`refraction`	`number`	`1.0`
`autoplay`	`boolean`	`true`
`autoplayInterval`	`number`	`5000`
`class`	`string`	`""`