crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-03-14 14:42:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update keen-slider (#592)

Browse Source 
Co-authored-by: Gonzalo Pozzo <gonzalo.pozzo4@gmail.com>
This commit is contained in:
Maaz 2021-12-15 22:54:06 +05:30 committed by GitHub
parent 9a4772cdb4
commit 2271864057
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 8 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
components/product/ProductSlider/ProductSlider.tsx
View File

@ -1,7 +1,6 @@
import { useKeenSlider } from 'keen-slider/react'
import React, {
Children,
FC,
isValidElement,
useState,
useRef,
@ -28,16 +27,14 @@ const ProductSlider: React.FC<ProductSliderProps> = ({
const [ref, slider] = useKeenSlider<HTMLDivElement>({
loop: true,
slidesPerView: 1,
mounted: () => setIsMounted(true),
slides: { perView: 1 },
created: () => setIsMounted(true),
slideChanged(s) {
const slideNumber = s.details().relativeSlide
const slideNumber = s.track.details.rel
setCurrentSlide(slideNumber)
if (thumbsContainerRef.current) {
const $el = document.getElementById(
`thumb-${s.details().relativeSlide}`
)
const $el = document.getElementById(`thumb-${slideNumber}`)
if (slideNumber >= 3) {
thumbsContainerRef.current.scrollLeft = $el!.offsetLeft
} else {
@ -77,8 +74,8 @@ const ProductSlider: React.FC<ProductSliderProps> = ({
}
}, [])
const onPrev = React.useCallback(() => slider.prev(), [slider])
const onNext = React.useCallback(() => slider.next(), [slider])
const onPrev = React.useCallback(() => slider.current?.prev(), [slider])
const onNext = React.useCallback(() => slider.current?.next(), [slider])
return (
<div className={cn(s.root, className)} ref={sliderContainerRef}>
@ -117,7 +114,7 @@ const ProductSlider: React.FC<ProductSliderProps> = ({
}),
id: `thumb-${idx}`,
onClick: () => {
slider.moveToSlideRelative(idx)
slider.current?.moveToIdx(idx)
},
},
}

2
package.json
View File

@ -31,7 +31,7 @@
"email-validator": "^2.0.4",
"immutability-helper": "^3.1.1",
"js-cookie": "^2.2.1",
"keen-slider": "^5.5.1",
"keen-slider": "^6.3.2",
"lodash.debounce": "^4.0.8",
"lodash.random": "^3.2.0",
"lodash.throttle": "^4.1.1",