Showcase

Slideshow

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

Preview

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

Installation

pnpm dlx motion-blocks add slideshow

npx motion-blocks add slideshow

bunx --bun motion-blocks add slideshow

yarn dlx motion-blocks add slideshow

Usage

---import "@/components/motion-blocks/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-blocks/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-blocks/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-blocks/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-blocks/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`	`"[]"`