feat(Carousel): Enhance carousel navigation by syncing with URL hash

thematters · Jan 8, 2025 · f6e5ed4 · f6e5ed4
1 parent 2652d82
commit f6e5ed4
Showing 1 changed file with 12 additions and 4 deletions.
diff --git a/src/views/Home/Channel/Page/Carousel/index.tsx b/src/views/Home/Channel/Page/Carousel/index.tsx
@@ -96,11 +96,14 @@ const ChannelCarousel = ({ items }: ChannelCarouselProps) => {
     if (!carouselApi) {
       return
     }
-
+    const channel = parseInt(hash.split('=')[1], 10)
+    const pageIndex = slicedItems.findIndex((item) =>
+      item.find((i: any) => i.id === channel.toString())
+    )
     carouselApi.reInit()
-    carouselApi.scrollTo(0)
+    carouselApi.scrollTo(pageIndex)
+    setDot(pageIndex)
 
-    setDot(0)
     setSnaps(carouselApi.scrollSnapList())
 
     carouselApi.on('select', onSelect)
@@ -132,8 +135,13 @@ const ChannelCarousel = ({ items }: ChannelCarouselProps) => {
     if (hash) {
       const channel = parseInt(hash.split('=')[1], 10)
       setSelectedChannel(channel)
+      // const pageIndex = Math.floor(channel / (Number(columnCount) * 2))
+      const pageIndex = slicedItems.findIndex((item) =>
+        item.find((i: any) => i.id === channel.toString())
+      )
+      carouselApi?.scrollTo(pageIndex)
     }
-  }, [hash])
+  }, [slicedItems, hash])
 
   return (
     <section className={styles.carousel}>