Glass Slideshow

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

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

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

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

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

const slides = [
  { src: "/images/slide1.jpg", alt: "Slide 1" },
  { src: "/images/slide2.jpg", alt: "Slide 2" },
  { src: "/images/slide3.jpg", alt: "Slide 3" }
];
---

<motion-glass-slideshow
  images={JSON.stringify(slides)}
  index={0}
  transition-duration={2000}
  intensity={1}
  distortion={1}
  chromatic-aberration={1}
  refraction={1}
  autoplay={true}
  autoplay-interval={5000}
  class="w-full h-[600px]"
/>

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

const slides = [
  { src: "/images/slide1.jpg", alt: "Slide 1" },
  { src: "/images/slide2.jpg", alt: "Slide 2" },
  { src: "/images/slide3.jpg", alt: "Slide 3" }
];

export default function Page() {
  return (
    <motion-glass-slideshow
      images={JSON.stringify(slides)}
      index={0}
      transition-duration={2000}
      intensity={1}
      distortion={1}
      chromatic-aberration={1}
      refraction={1}
      autoplay={true}
      autoplay-interval={5000}
      className="w-full h-[600px]"
    />
  );
}

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

const slides = [
  { src: "/images/slide1.jpg", alt: "Slide 1" },
  { src: "/images/slide2.jpg", alt: "Slide 2" },
  { src: "/images/slide3.jpg", alt: "Slide 3" }
];
</script>

<template>
  <motion-glass-slideshow
    :images="JSON.stringify(slides)"
    :index="0"
    :transition-duration="2000"
    :intensity="1"
    :distortion="1"
    :chromatic-aberration="1"
    :refraction="1"
    :autoplay="true"
    :autoplay-interval="5000"
    class="w-full h-[600px]"
  />
</template>

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

  const slides = [
    { src: "/images/slide1.jpg", alt: "Slide 1" },
    { src: "/images/slide2.jpg", alt: "Slide 2" },
    { src: "/images/slide3.jpg", alt: "Slide 3" }
  ];
</script>

<motion-glass-slideshow
  images={JSON.stringify(slides)}
  index={0}
  transition-duration={2000}
  intensity={1}
  distortion={1}
  chromatic-aberration={1}
  refraction={1}
  autoplay={true}
  autoplay-interval={5000}
  class="w-full h-[600px]"
/>

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

<motion-glass-slideshow
  images='[{"src":"/images/slide1.jpg","alt":"Slide 1"},{"src":"/images/slide2.jpg","alt":"Slide 2"},{"src":"/images/slide3.jpg","alt":"Slide 3"}]'
  index="0"
  transition-duration="2000"
  intensity="1"
  distortion="1"
  chromatic-aberration="1"
  refraction="1"
  autoplay="true"
  autoplay-interval="5000"
  class="w-full h-[600px]"
/>