Showcase

Slideshow

Full-bleed image slideshow with parallax slide transitions and thumbnail navigation. Framework-agnostic Custom Element.

lit
gsap

Preview

Click a thumbnail or use the navigation to transition between slides. The inner image parallaxes opposite the slide direction.

Installation

pnpm dlx shadcn@latest add https://motion-kit-astro.vercel.app/r/slideshow.json

npx shadcn@latest add https://motion-kit-astro.vercel.app/r/slideshow.json

bunx --bun shadcn@latest add https://motion-kit-astro.vercel.app/r/slideshow.json

yarn dlx shadcn@latest add https://motion-kit-astro.vercel.app/r/slideshow.json

Usage

---
import "@/components/motion-kit/slideshow-element.ts";
---

<motion-slideshow
  images='[{"src":"/1.jpg","alt":"One"},{"src":"/2.jpg","alt":"Two"}]'
  class="aspect-video w-full max-w-2xl rounded-xl overflow-hidden"
></motion-slideshow>

import "@/components/motion-kit/slideshow-element.ts";

export default function Page() {
  return (
    <motion-slideshow
      images='[{"src":"/1.jpg","alt":"One"},{"src":"/2.jpg","alt":"Two"}]'
      class="aspect-video w-full max-w-2xl rounded-xl overflow-hidden"
    />
  );
}

<script setup>
import "@/components/motion-kit/slideshow-element.ts";
</script>

<template>
  <motion-slideshow
    :images='JSON.stringify([{"src":"/1.jpg","alt":"One"},{"src":"/2.jpg","alt":"Two"}])'
    class="aspect-video w-full max-w-2xl rounded-xl overflow-hidden"
  />
</template>

<script>
  import "@/components/motion-kit/slideshow-element.ts";
</script>

<motion-slideshow
  images='[{"src":"/1.jpg","alt":"One"},{"src":"/2.jpg","alt":"Two"}]'
  class="aspect-video w-full max-w-2xl rounded-xl overflow-hidden"
/>

<script type="module" src="/components/motion-kit/slideshow-element.js"></script>

<motion-slideshow
  images='[{"src":"/1.jpg","alt":"One"},{"src":"/2.jpg","alt":"Two"}]'
  class="aspect-video w-full max-w-2xl rounded-xl overflow-hidden"
></motion-slideshow>

API Reference

Attribute	Type	Default
`images`	`string`	`"[]"`