🐛 bug: caroucel

:%s
This commit is contained in:
unknown 2021-08-26 13:09:23 +07:00
parent beb9b2e47c
commit ffec57fa17
2 changed files with 26 additions and 10 deletions

View File

@ -87,6 +87,10 @@ export default function Home() {
return ( return (
<> <>
<ProductCaroucel data={dataTest} itemKey="product-1" isDot={true}/> <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, lets chat for a sec about the ingredients. To make this pho soup recipe, you will need:" />
</div>
</> </>
) )
} }

View File

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