fix(Channel): revise Carousel

thematters · Jan 3, 2025 · 2d9eb6e · 2d9eb6e
1 parent 98a2191
commit 2d9eb6e
Showing 1 changed file with 15 additions and 14 deletions.
diff --git a/src/views/Home/Channel/Page/Carousel/index.tsx b/src/views/Home/Channel/Page/Carousel/index.tsx
@@ -45,8 +45,9 @@ const ChannelCarousel = () => {
     },
   ]
   const [dot, setDot] = useState(0)
+  const [, setSnaps] = useState<any[]>([])
   const [carousel, carouselApi] = useEmblaCarousel({
-    align: 'start',
+    loop: true,
     skipSnaps: false,
   })
 
@@ -83,11 +84,12 @@ const ChannelCarousel = () => {
     }
   }, [hash])
 
-  const onCaptureClick = (event: MouseEvent) => {
-    if (scrolling.current) {
-      event.preventDefault()
-      event.stopPropagation()
+  const scroll = (index: number) => {
+    if (!carouselApi) {
+      return
     }
+    setDot(index)
+    carouselApi.scrollTo(index)
   }
 
   const onSelect = () => {
@@ -96,6 +98,13 @@ const ChannelCarousel = () => {
     }
   }
 
+  const onCaptureClick = (event: MouseEvent) => {
+    if (scrolling.current) {
+      event.preventDefault()
+      event.stopPropagation()
+    }
+  }
+
   useEffect(() => {
     if (!carouselApi) {
       return
@@ -105,6 +114,7 @@ const ChannelCarousel = () => {
     carouselApi.scrollTo(0)
 
     setDot(0)
+    setSnaps(carouselApi.scrollSnapList())
 
     carouselApi.on('select', onSelect)
     carouselApi.on('scroll', () => {
@@ -119,15 +129,6 @@ const ChannelCarousel = () => {
     })
   }, [items, carouselApi])
 
-  const scroll = (index: number) => {
-    if (!carouselApi) {
-      return
-    }
-    setDot(index)
-    carouselApi.scrollTo(index)
-    stop()
-  }
-
   return (
     <section className={styles.carousel}>
       <section