From 3e4d68891ea9ca818914e68efad10951b549d028 Mon Sep 17 00:00:00 2001
From: fyzanshaik <fyzan.shaik@gmail.com>
Date: Thu, 28 Aug 2025 02:00:56 +0530
Subject: [PATCH 1/2] Scroll fixed and enabled buttons

Signed-off-by: fyzanshaik <fyzan.shaik@gmail.com>
---
 src/lib/components/Carousel.svelte | 40 +++++++++++++++++++++---------
 1 file changed, 28 insertions(+), 12 deletions(-)

diff --git a/src/lib/components/Carousel.svelte b/src/lib/components/Carousel.svelte
index eba8cc707f..c9b1a88d71 100644
--- a/src/lib/components/Carousel.svelte
+++ b/src/lib/components/Carousel.svelte
@@ -11,20 +11,20 @@
     }
 
     const { size = 'default', gap = 32, header, children }: Props = $props();
-    let scroll = 0;
 
     function calculateScrollAmount(prev = false) {
+        if (!carousel) return 0;
+        
         const direction = prev ? -1 : 1;
-        const carouselSize = carousel?.clientWidth;
-        const childSize = (carousel.childNodes[0] as HTMLUListElement)?.clientWidth + gap;
-
-        scroll = scroll || carouselSize;
-
+        const carouselSize = carousel.clientWidth;
+        
+        const firstChild = carousel.querySelector('li') as HTMLElement;
+        if (!firstChild) return 0;
+        
+        const childSize = firstChild.offsetWidth + gap;
         const numberOfItems = Math.floor(carouselSize / childSize);
-        const overflow = scroll % childSize;
-        const amount = numberOfItems * childSize - overflow * direction;
-        scroll += amount * direction;
-        return amount * direction;
+        
+        return numberOfItems * childSize * direction;
     }
 
     function next() {
@@ -44,9 +44,19 @@
     let isStart = $state(true);
 
     function handleScroll() {
+        if (!carousel) return;
+        
         isStart = carousel.scrollLeft <= 0;
-        isEnd = Math.ceil(carousel.scrollLeft + carousel.offsetWidth) >= carousel.scrollWidth;
+        isEnd = Math.ceil(carousel.scrollLeft + carousel.offsetWidth) >= carousel.scrollWidth - 1;
     }
+
+    $effect(() => {
+        if (carousel) {
+            setTimeout(() => {
+                handleScroll();
+            }, 0);
+        }
+    });
 </script>
 
 <div>
@@ -66,7 +76,7 @@
             <button
                 class="web-icon-button cursor-pointer"
                 aria-label="Move carousel forward"
-                disabled
+                disabled={isEnd}
                 onclick={next}
             >
                 <span class="web-icon-arrow-right" aria-hidden="true"></span>
@@ -82,6 +92,12 @@
             style:gap="{gap}px"
             bind:this={carousel}
             onscroll={handleScroll}
+            onwheel={(e) => {
+                if (e.deltaY !== 0) {
+                    e.preventDefault();
+                    carousel.scrollLeft += e.deltaY;
+                }
+            }}
         >
             {@render children()}
         </ul>

From b11b0af7d1f855cffb0b3fe9ecfa376caa21320d Mon Sep 17 00:00:00 2001
From: fyzanshaik <fyzan.shaik@gmail.com>
Date: Thu, 28 Aug 2025 02:07:55 +0530
Subject: [PATCH 2/2] prettier format

Signed-off-by: fyzanshaik <fyzan.shaik@gmail.com>
---
 src/lib/components/Carousel.svelte | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/lib/components/Carousel.svelte b/src/lib/components/Carousel.svelte
index c9b1a88d71..319201183b 100644
--- a/src/lib/components/Carousel.svelte
+++ b/src/lib/components/Carousel.svelte
@@ -14,16 +14,16 @@
 
     function calculateScrollAmount(prev = false) {
         if (!carousel) return 0;
-        
+
         const direction = prev ? -1 : 1;
         const carouselSize = carousel.clientWidth;
-        
+
         const firstChild = carousel.querySelector('li') as HTMLElement;
         if (!firstChild) return 0;
-        
+
         const childSize = firstChild.offsetWidth + gap;
         const numberOfItems = Math.floor(carouselSize / childSize);
-        
+
         return numberOfItems * childSize * direction;
     }
 
@@ -45,7 +45,7 @@
 
     function handleScroll() {
         if (!carousel) return;
-        
+
         isStart = carousel.scrollLeft <= 0;
         isEnd = Math.ceil(carousel.scrollLeft + carousel.offsetWidth) >= carousel.scrollWidth - 1;
     }