AdventureLog/frontend/src/lib/components/CardCarousel.svelte

<script lang="ts">
	import type { Adventure } from '$lib/types';
	import ImageDisplayModal from './ImageDisplayModal.svelte';

	export let adventures: Adventure[] = [];

	let adventure_images: string[] = [];
	let currentSlide = 0; // Declare as a regular variable

	let adventure: Adventure | null = null;
	let image_url: string | null = null;

	adventures.forEach((adventure) => {
		adventure_images = [...adventure_images, ...adventure.images.map((image) => image.image)];
	});

	// Reactive statement to log when currentSlide changes
	$: console.log('Current slide:', currentSlide);

	function changeSlide(direction: string) {
		if (direction === 'next' && currentSlide < adventure_images.length - 1) {
			currentSlide = currentSlide + 1; // Use direct assignment
		} else if (direction === 'prev' && currentSlide > 0) {
			currentSlide = currentSlide - 1; // Use direct assignment
		}
	}
</script>

{#if image_url}
	<ImageDisplayModal image={image_url} on:close={() => (image_url = null)} />
{/if}

<figure>
	{#if adventure_images && adventure_images.length > 0}
		<div class="carousel w-full relative">
			<!-- svelte-ignore a11y-click-events-have-key-events -->
			<div class="carousel-item w-full block">
				<!-- svelte-ignore a11y-click-events-have-key-events -->
				<!-- svelte-ignore a11y-no-static-element-interactions -->
				<!-- svelte-ignore a11y-missing-attribute -->
				<a
					on:click|stopPropagation={() => (image_url = adventure_images[currentSlide])}
					class="cursor-pointer"
				>
					<img
						src={adventure_images[currentSlide]}
						class="w-full h-48 object-cover"
						alt={adventure_images[currentSlide]}
					/>
				</a>

				{#if adventure_images.length > 1}
					<div class="absolute inset-0 flex items-center justify-between pointer-events-none">
						{#if currentSlide > 0}
							<button
								on:click|stopPropagation={() => changeSlide('prev')}
								class="btn btn-circle btn-sm ml-2 pointer-events-auto">❮</button
							>
						{:else}
							<div class="w-12"></div>
						{/if}

						{#if currentSlide < adventure_images.length - 1}
							<button
								on:click|stopPropagation={() => changeSlide('next')}
								class="btn btn-circle mr-2 btn-sm pointer-events-auto">❯</button
							>
						{:else}
							<div class="w-12"></div>
						{/if}
					</div>
				{/if}
			</div>
		</div>
	{:else}
		<!-- svelte-ignore a11y-img-redundant-alt -->
		<img
			src={'https://placehold.co/300?text=No%20Image%20Found&font=roboto'}
			alt="No image available"
			class="w-full h-48 object-cover"
		/>
	{/if}
</figure>