From 2271864057dcf0b02e1ba34767c4e487f222caee Mon Sep 17 00:00:00 2001
From: Maaz <80816622+mmaaaaz@users.noreply.github.com>
Date: Wed, 15 Dec 2021 22:54:06 +0530
Subject: [PATCH] Update keen-slider (#592)

Co-authored-by: Gonzalo Pozzo <gonzalo.pozzo4@gmail.com>
---
 .../product/ProductSlider/ProductSlider.tsx     | 17 +++++++----------
 package.json                                    |  2 +-
 2 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/components/product/ProductSlider/ProductSlider.tsx b/components/product/ProductSlider/ProductSlider.tsx
index 537a12a46..209256b9d 100644
--- a/components/product/ProductSlider/ProductSlider.tsx
+++ b/components/product/ProductSlider/ProductSlider.tsx
@@ -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)
                   },
                 },
               }
diff --git a/package.json b/package.json
index e319a867b..f0fa51e02 100644
--- a/package.json
+++ b/package.json
@@ -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",