Hydration Mismatch Bug / Svelte 5 about kit HOT 8 CLOSED

<script lang="ts">
	import { ChevronRight, Phone, Mail, LucideTableCellsMerge, ChevronLeft } from 'lucide-svelte';
	import { swiperSlideOUXNews } from '../data/slides';
	import { onDestroy, onMount } from 'svelte';

	let scrollElement = $state<HTMLElement>();
	let currentSlide = $state(0);
	const totalSlides = swiperSlideOUXNews.length;

	function handleScroll() {
		if (!scrollElement) return;
		const slideWidth = scrollElement.offsetWidth;
		const newIndex = Math.round(scrollElement.scrollLeft / slideWidth);
		if (newIndex !== currentSlide) {
			currentSlide = newIndex;
		}
	}

	function nextSlide() {
		currentSlide = (currentSlide + 1) % totalSlides;
		scrollToCurrentSlide();
	}

	function prevSlide() {
		currentSlide = (currentSlide - 1 + totalSlides) % totalSlides;
		scrollToCurrentSlide();
	}

	function scrollToCurrentSlide() {
		if (!scrollElement) return;
		const slideWidth = scrollElement.offsetWidth;
		scrollElement.scrollLeft = slideWidth * currentSlide;
	}

	$inspect(currentSlide);

	onMount(() => {
		if (scrollElement) {
			scrollElement.addEventListener('scroll', handleScroll);
			scrollToCurrentSlide();
			return onDestroy(() => {
				if (scrollElement) {
					scrollElement.removeEventListener('scroll', handleScroll);
				}
			});
		}
	});
</script>

<section class="">
	<div class="mt-20"></div>
	<div class="ml-8 md:mx-52 md:text-center">
		<div id="oux-news" class="leading-12 font-kanit text-5xl font-extrabold uppercase">
			OMEGAUX<br class="md:hidden" /> NEWS
		</div>
	</div>
	<div class="mb-8 ml-8 flex justify-start md:mx-52 md:justify-center">
		<div class="mt-6 h-1 w-1/3 bg-flamingo-500 md:w-1/12"></div>
	</div>
	<div class="relative md:mt-20">
		<div
			class=" overflow flex snap-x snap-mandatory flex-row overflow-x-scroll"
			bind:this={scrollElement}
		>
			{#each swiperSlideOUXNews as article, i}
				<div id={article.sliderID} class=" w-screen flex-shrink-0 snap-start">
					<div
						class="flex min-h-60 items-center bg-cover md:mx-52"
						style="background-image: url('{article.image}');"
					>
						<h1 class="p-12 text-2xl md:justify-center">{@html article.title}</h1>
					</div>
					<div class="flex flex-row justify-between border-b border-flamingo-500 p-6 md:mx-52">
						<div class="flex">
							<img
								class="h-12 w-12 rounded-full object-cover"
								src={article.authorImage}
								alt={article.title}
							/>
							<div class="ml-4">
								<h1 class="font-quattrocentoSans text-base font-bold">{article.author}</h1>
								<h1 class="font-quattrocentoSans text-sm font-extralight">{article.date}</h1>
							</div>
						</div>
						<!-- TODO Unhide and make into scheduling button? -->
						<button class="hidden">
							<img src="Button-Heart.svg" alt="HeartSVG" class=" h-12 w-12" />
						</button>
					</div>
					<div class="border-b border-flamingo-500 bg-steel-gray-900 pb-6 md:mx-52">
						<p class="px-8 pt-4 font-quattrocentoSans text-base">
							{@html article.descriptionPath}
						</p>
						<!-- TODO Unhide and implement functionality -->
						<img src="Button-Share.svg" alt="Share" class="mb-6 ml-8 mt-6 hidden h-10" />
					</div>
				</div>
			{/each}
		</div>
		<button class="absolute left-0 top-24 z-50 md:left-32" onclick={prevSlide}>
			<ChevronLeft class="h-10 w-10 text-slate-400 " />
		</button><button class="absolute right-0 top-24 z-50 md:right-32" onclick={nextSlide}
			><ChevronRight class="h-10 w-10" /></button
		>
		<div class="absolute right-4 top-48 flex space-x-2 md:right-80">
			{#each Array(totalSlides) as _, index}
				<button
					class="h-2 w-2 rounded-full bg-flamingo-500 {index === currentSlide
						? 'bg-flamingo-500'
						: 'bg-white'}"
					onclick={() => {
						currentSlide = index;
						scrollToCurrentSlide();
					}}
				></button>
			{/each}
		</div>
	</div>
</section>