Make it autoplay, tidy

Author: MostlyTurquoise

package-lock.json

@@ -14,6 +14,7 @@
     "@astrojs/svelte": "^6.0.2",
     "@astrojs/tailwind": "^5.1.2",
     "astro": "^4.16.18",
+    "embla-carousel-autoplay": "^8.5.1",
     "svelte": "^5.2.11",
     "tailwindcss": "^3.4.15",
     "typescript": "^5.7.2"

package.json

@@ -1,9 +1,11 @@
 <script lang="ts">
     import * as Carousel from "@/components/ui/carousel/index.ts";
     import { type CarouselAPI } from "@/components/ui/carousel/context.js";
+    import Autoplay from "embla-carousel-autoplay";
     import { Button } from "@/components/ui/button";
     import HomepageCarouselItem from "@/components/HomepageCarouselItem.svelte";
     interface Props {
+        speed: number;
         slides: {
             image: {
                 path: string;
@@ -15,7 +17,7 @@
             actionTo: string;
         }[];
     }
-    let { slides }: Props = $props();
+    let { slides, speed }: Props = $props();
 
     let currentSlide: number = $state(0); // TODO: make check for actual value here. Could break if not starting at 0
 
@@ -37,6 +39,11 @@
     opts={{
         loop: true,
     }}
+    plugins={[
+        Autoplay({
+          delay: speed,
+        }),
+      ]}
     class="w-full h-fit"
     bind:api
 >

src/components/HomepageCarousel.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
     import * as Carousel from "@/components/ui/carousel";
-    import type { Snippet } from "svelte";
     interface Props {
         src: string;
         alt?: string;

src/components/HomepageCarouselItem.svelte

@@ -10,7 +10,7 @@ import HomepageCarousel from '@/components/HomepageCarousel.svelte';
 		<Navbar/>
 	</header>
 	<main class="h-screen">
-		<HomepageCarousel client:load slides={[
+		<HomepageCarousel client:load speed={10000} slides={[
 			{
 				title:"Lorem Ipsum",
 				image:{
@@ -21,7 +21,7 @@ import HomepageCarousel from '@/components/HomepageCarousel.svelte';
 				actionTo:"/"
 			},
 			{
-				title:"2 Lorem Ipsum",
+				title:"2 Lorem 2 Ipsum",
 				image:{
 					path:"/images/IMG_7294.JPG",
 				},
@@ -30,7 +30,7 @@ import HomepageCarousel from '@/components/HomepageCarousel.svelte';
 				actionTo:"/"
 			},
 			{
-				title:"3 Lorem Ipsum",
+				title:"Lorem Ipsum 3: Revenge of the if()",
 				image:{
 					path:"/images/IMG_7311.JPG",
 				},