From 1b3e4e707765de04474af16cfd5b1b8ae26406d4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juli=C3=A1n=20Benegas?= Date: Fri, 23 Oct 2020 09:38:44 -0300 Subject: [PATCH] fix slider flicker --- components/product/ProductSlider/ProductSlider.tsx | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/components/product/ProductSlider/ProductSlider.tsx b/components/product/ProductSlider/ProductSlider.tsx index 11d8f5f4f..0e9411596 100644 --- a/components/product/ProductSlider/ProductSlider.tsx +++ b/components/product/ProductSlider/ProductSlider.tsx @@ -7,11 +7,15 @@ import s from './ProductSlider.module.css' const ProductSlider: FC = ({ children }) => { const [currentSlide, setCurrentSlide] = useState(0) + const [isMounted, setIsMounted] = useState(false) + const [ref, slider] = useKeenSlider({ + loop: true, + slidesPerView: 1, + mounted: () => setIsMounted(true), slideChanged(s) { setCurrentSlide(s.details().relativeSlide) }, - loop: true, }) return ( @@ -22,7 +26,11 @@ const ProductSlider: FC = ({ children }) => { -
+
{Children.map(children, (child) => { // Add the keen-slider__slide className to children if (isValidElement(child)) {