cx/commerce
4
0
Fork 0
forked from crowetic/commerce
Code Pull Requests Activity

fix slider flicker

Browse Source
This commit is contained in:
Julián Benegas 2020-10-23 09:38:44 -03:00
parent 008d5b17d1
commit 1b3e4e7077
1 changed files with 10 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,11 +7,15 @@ import s from './ProductSlider.module.css'
const ProductSlider: FC = ({ children }) => { const ProductSlider: FC = ({ children }) => {
const [currentSlide, setCurrentSlide] = useState(0) const [currentSlide, setCurrentSlide] = useState(0)
const [isMounted, setIsMounted] = useState(false)
const [ref, slider] = useKeenSlider<HTMLDivElement>({ const [ref, slider] = useKeenSlider<HTMLDivElement>({
loop: true,
slidesPerView: 1,
mounted: () => setIsMounted(true),
slideChanged(s) { slideChanged(s) {
setCurrentSlide(s.details().relativeSlide) setCurrentSlide(s.details().relativeSlide)
}, },
loop: true,
}) })
return ( return (
@ -22,7 +26,11 @@ const ProductSlider: FC = ({ children }) => {
<button className={cn(s.rightControl, s.control)} onClick={slider?.next}> <button className={cn(s.rightControl, s.control)} onClick={slider?.next}>
<HiChevronRight /> <HiChevronRight />
</button> </button>
<div ref={ref} className="keen-slider h-full"> <div
ref={ref}
className="keen-slider h-full transition-opacity duration-150"
style={{ opacity: isMounted ? 1 : 0 }}
>
{Children.map(children, (child) => { {Children.map(children, (child) => {
// Add the keen-slider__slide className to children // Add the keen-slider__slide className to children
if (isValidElement(child)) { if (isValidElement(child)) {