🐛 bug: caroucel

:%s

pages/index.tsx

@@ -87,6 +87,10 @@ export default function Home() {
   return (
     <>
       <ProductCaroucel data={dataTest} itemKey="product-1" isDot={true}/>
+      <div>
+        <FeaturedProductCard title="Sale 25% Coffee Bean" subTitle="50 first Orders within a day" price="$15.00" originPrice="$20.00" imageSrc={image9.src} />
+        <RecipeCard title="Sale 25% Coffee Bean" imageSrc={image12.src} description="Alright, before we get to the actual recipe, let’s chat for a sec about the ingredients.  To make this pho soup recipe, you will need:" />
+      </div>
     </>
   )
 }

src/components/common/CarouselCommon/CarouselCommon.tsx

@@ -35,27 +35,39 @@ const CarouselCommon = <T,>({
     slidesPerView,
     slideChanged(s) {
       setCurrentSlide(s.details().relativeSlide)
+      let dot = 0 
+      dotArr.forEach((index)=>{
+        if(s.details().relativeSlide >= Math.floor(index)){
+          dot = index
+        }
+      })
+      setDotActive(dot)
     },
   })
-  const handleRightArrowClick = () => {
-    slider.next()
-  }
   
   useEffect(() => {
     if(isDot && slider){
-      console.log('f',Math.ceil(data.length/(Number(slider.details().slidesPerView)||1)))
-      setDotArr([...Array(Math.ceil(data.length/(Number(slider.details().slidesPerView)||1))).keys()])
+      // console.log('f',Math.ceil(data.length/(Number(slider.details().slidesPerView)||1)))
+      let array:number[]
+      array =  [...Array(Math.ceil(data.length/(Number(slider.details().slidesPerView)||1))).keys()].map((i)=>{
+        return (Number(slider.details().slidesPerView)||1)*i
+      })
+      
+      setDotArr(array)
     }
   }, [isDot,slider])
 
+  const handleRightArrowClick = () => {
+    slider.next()
+  }
+
   const handleLeftArrowClick = () => {
     slider.prev()
   }
 
   const onDotClick = (index:number) => {
-    slider.moveToSlide(((Number(slider.details().slidesPerView)||1)*index))
-    setDotActive(index)
-
+    slider.moveToSlideRelative(Math.floor(index))
+    // setDotActive(index)
   }
   return (
     <div className={s.navigationWrapper}>