From 073abf5ca6e5eee8cc19315b004eb36ca04fa6a8 Mon Sep 17 00:00:00 2001
From: Radiquum <kentai.waah@gmail.com>
Date: Thu, 24 Jul 2025 20:43:14 +0500
Subject: [PATCH] feat: add slides snap by click

---
 app/Section/Photos.tsx             |  2 +-
 app/components/Photos.Carousel.tsx | 14 ++++++++++----
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/app/Section/Photos.tsx b/app/Section/Photos.tsx
index 097a5b9..3cf9420 100644
--- a/app/Section/Photos.tsx
+++ b/app/Section/Photos.tsx
@@ -21,7 +21,7 @@ const links = [
   },
 ];
 
-const OPTIONS: EmblaOptionsType = { dragFree: true, loop: true };
+const OPTIONS: EmblaOptionsType = { loop: true};
 const SLIDES = [
   "/images/photos/2024-06-14T19_32_04_024.JPG",
   "/images/photos/2024-06-17T18_55_55_030.JPG",
diff --git a/app/components/Photos.Carousel.tsx b/app/components/Photos.Carousel.tsx
index 68e43f5..c0f20de 100644
--- a/app/components/Photos.Carousel.tsx
+++ b/app/components/Photos.Carousel.tsx
@@ -90,18 +90,24 @@ const EmblaCarousel: React.FC<PropType> = (props) => {
     <div className="embla">
       <div className="embla__viewport" ref={emblaRef}>
         <div className="embla__container">
-          {slides.map((index) => (
-            <div className="embla__slide" key={index}>
+          {slides.map((item, index) => (
+            <button
+              className="embla__slide"
+              onClick={() => {
+                if (emblaApi) emblaApi.scrollTo(index);
+              }}
+              key={`embla.slide.${index}`}
+            >
               <div className="embla__parallax">
                 <div className="embla__parallax__layer">
                   <img
                     className="embla__slide__img embla__parallax__img"
-                    src={index}
+                    src={item}
                     alt=""
                   />
                 </div>
               </div>
-            </div>
+            </button>
           ))}
         </div>
       </div>