From c7ac5ad861e5d1cefb493a3300b0d74270bee856 Mon Sep 17 00:00:00 2001
From: Samandar Turgunboyev <turgunboyevsamandar4@gmail.com>
Date: Tue, 24 Feb 2026 15:05:24 +0500
Subject: [PATCH] carousel

---
 .../categories/ui/category-carousel.tsx       |  9 ++++++-
 src/widgets/welcome/ui/index.tsx              | 26 ++++++++++++++++---
 2 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/src/widgets/categories/ui/category-carousel.tsx b/src/widgets/categories/ui/category-carousel.tsx
index 98f405a..a9e11a0 100644
--- a/src/widgets/categories/ui/category-carousel.tsx
+++ b/src/widgets/categories/ui/category-carousel.tsx
@@ -107,7 +107,14 @@ const CategoryCarousel = memo(function CategoryCarousel({
         </div>
       </div>
 
-      <Carousel className="w-full mt-2" setApi={setApi}>
+      <Carousel
+        opts={{
+          align: 'start',
+          dragFree: true, // 🔥 free scroll
+        }}
+        className="w-full mt-2"
+        setApi={setApi}
+      >
         <CarouselContent className="pr-[12%] sm:pr-0">
           {activeProducts.map((product) => (
             <CarouselItem
diff --git a/src/widgets/welcome/ui/index.tsx b/src/widgets/welcome/ui/index.tsx
index a373cb4..3d728bc 100644
--- a/src/widgets/welcome/ui/index.tsx
+++ b/src/widgets/welcome/ui/index.tsx
@@ -119,7 +119,14 @@ const Welcome = () => {
   return (
     <>
       <div className="custom-container">
-        <Carousel className="w-full" setApi={setApi}>
+        <Carousel
+          className="w-full"
+          setApi={setApi}
+          opts={{
+            align: 'start',
+            dragFree: true, // 🔥 free scroll
+          }}
+        >
           <CarouselContent>
             {isLoading && (
               <CarouselItem className="relative">
@@ -171,7 +178,13 @@ const Welcome = () => {
           </CarouselContent>
         </Carousel>
 
-        <Carousel className="w-full mt-5">
+        <Carousel
+          opts={{
+            align: 'start',
+            dragFree: true,
+          }}
+          className="w-full mt-5"
+        >
           <CarouselContent className="py-2 px-1 pr-[12%]">
             {category &&
               category.map((banner, index) => (
@@ -220,7 +233,14 @@ const Welcome = () => {
             <div className="p-1.5 bg-slate-100 rounded-full group-hover:bg-blue-100 transition-all"></div>
           </div>
         </div>
-        <Carousel className="w-full" setApi={setApiPro}>
+        <Carousel
+          opts={{
+            align: 'start',
+            dragFree: true,
+          }}
+          className="w-full"
+          setApi={setApiPro}
+        >
           <CarouselContent className="pr-[12%] sm:pr-0">
             {productLoading &&
               Array.from({ length: 6 }).map((__, index) => (