From 1b3e4e707765de04474af16cfd5b1b8ae26406d4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Juli=C3=A1n=20Benegas?= <julianbenegas99@gmail.com>
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<HTMLDivElement>({
+    loop: true,
+    slidesPerView: 1,
+    mounted: () => setIsMounted(true),
     slideChanged(s) {
       setCurrentSlide(s.details().relativeSlide)
     },
-    loop: true,
   })
 
   return (
@@ -22,7 +26,11 @@ const ProductSlider: FC = ({ children }) => {
       <button className={cn(s.rightControl, s.control)} onClick={slider?.next}>
         <HiChevronRight />
       </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) => {
           // Add the keen-slider__slide className to children
           if (isValidElement(child)) {