Merge pull request #64 from dddsw/static-carousel

Make carousel static after page load

src/lib/Carousel.svelte

@@ -1,70 +1,48 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy';
-
-	let carouselImages = [
+	const carouselImages = [
 		{
-			id: 1,
 			src: '../images/carousel/carousel-2024-1.jpg',
 			alt: 'Attendees and sponsors mingling in the communal area'
 		},
 		{
-			id: 2,
 			src: '../images/carousel/carousel-2024-2.jpg',
 			alt: 'A room full of attendees eager to start the day'
 		},
 		{
-			id: 3,
 			src: '../images/carousel/carousel-2024-3.jpg',
 			alt: 'Visitors all gathered for the end of day prize giving'
 		},
 		{
-			id: 4,
 			src: '../images/carousel/carousel-2024-4.jpg',
 			alt: 'Guests eagerly waiting for the speakers to start their session'
 		},
 		{
-			id: 5,
 			src: '../images/carousel/carousel-2024-5.jpg',
 			alt: 'Standing room only in one of our stages'
 		},
 		{
-			id: 6,
 			src: '../images/carousel/carousel-2024-6.jpg',
 			alt: 'The amazing food as provided by our sponsors'
 		},
 		{
-			id: 7,
 			src: '../images/carousel/carousel-2024-7.jpg',
 			alt: 'A live podcast recording with a guest panel of speakers'
 		}
 	];
 
-	let carouselImage;
-	run(() => {
-		carouselImage = carouselImages[0];
-	});
-
-	setInterval(() => {
-		const currentId = carouselImage.id;
-		if (currentId === carouselImages.length) {
-			carouselImage = carouselImages[0];
-		} else {
-			carouselImage = carouselImages[currentId];
-		}
-	}, 4000);
+	const num = Math.floor(Math.random() * carouselImages.length);
+	const carouselImage = carouselImages[num];
 </script>
 
-{#key carouselImage}
-	<div
-		class="header"
-		style="background-image: url({carouselImage.src});"
-		aria-label={carouselImage.alt}>
-		<div class="details-container shadow">
-			<span class="name">DDD South West</span><br />
-			<span class="details">26th April 2025 @ Engine Shed</span>
-		</div>
+<div
+	class="header"
+	style="background-image: url({carouselImage.src});"
+	aria-label={carouselImage.alt}>
+	<div class="details-container shadow">
+		<span class="name">DDD South West</span><br />
+		<span class="details">26th April 2025 @ Engine Shed</span>
 	</div>
-{/key}
+</div>
 
 <style>
 	.header {