Changes

assets/base.css

@@ -91,6 +91,7 @@ body {
   -moz-osx-font-smoothing: grayscale;
   background-color: var(--primary);
   color: var(--text-primary);
+  overscroll-behavior-x: none;
 }
 
 body {

components/product/ProductSlider/ProductSlider.module.css

@@ -33,55 +33,26 @@
   margin-right: -1px;
 }
 
+.thumb {
+  @apply transition-transform transition-colors ease-linear duration-75 overflow-hidden
+  inline-block cursor-pointer;
+  width: 275px;
+}
+
+.thumb:focus,
+.thumb.selected {
+  @apply bg-white;
+}
+
+.thumb:hover {
+  transform: scale(1.02);
+  background-color: rgba(255, 255, 255, 0.08);
+}
+
 .album {
   @apply bg-violet-dark;
-  overflow: auto;
+  overflow-y: hidden;
+  overflow-x: auto;
   white-space: nowrap;
-}
-
-.album > * {
-  @apply cursor-pointer;
-  display: inline-block;
-  width: 300px;
-}
-
-.album > div:hover {
-  @apply bg-violet-light;
-}
-
-.positionIndicatorsContainer {
-  @apply hidden;
-
-  @screen sm {
-    @apply block absolute bottom-6 left-1/2;
-    transform: translateX(-50%);
-  }
-}
-
-.positionIndicator {
-  @apply rounded-full p-2;
-}
-
-.dot {
-  @apply bg-hover-1 transition w-3 h-3 rounded-full;
-}
-
-.positionIndicator:hover .dot {
-  @apply bg-hover-2;
-}
-
-.positionIndicator:focus {
-  @apply outline-none;
-}
-
-.positionIndicator:focus .dot {
-  @apply shadow-outline-normal;
-}
-
-.positionIndicatorActive .dot {
-  @apply bg-white;
-}
-
-.positionIndicatorActive:hover .dot {
-  @apply bg-white;
+  height: 275px;
 }

components/product/ProductSlider/ProductSlider.tsx

@@ -8,7 +8,7 @@ import React, {
   useEffect,
 } from 'react'
 import cn from 'classnames'
-
+import { a } from '@react-spring/web'
 import s from './ProductSlider.module.css'
 import { ChevronLeft, ChevronRight } from '@components/icons'
 
@@ -16,13 +16,26 @@ const ProductSlider: FC = ({ children }) => {
   const [currentSlide, setCurrentSlide] = useState(0)
   const [isMounted, setIsMounted] = useState(false)
   const sliderContainerRef = useRef<HTMLDivElement>(null)
+  const thumbsContainerRef = useRef<HTMLDivElement>(null)
 
   const [ref, slider] = useKeenSlider<HTMLDivElement>({
     loop: true,
     slidesPerView: 1,
     mounted: () => setIsMounted(true),
     slideChanged(s) {
-      setCurrentSlide(s.details().relativeSlide)
+      const slideNumber = s.details().relativeSlide
+      setCurrentSlide(slideNumber)
+
+      if (thumbsContainerRef.current) {
+        const $el = document.getElementById(
+          `thumb-${s.details().relativeSlide}`
+        )
+        if (slideNumber >= 3) {
+          thumbsContainerRef.current.scrollLeft = $el!.offsetLeft
+        } else {
+          thumbsContainerRef.current.scrollLeft = 0
+        }
+      }
     },
   })
 
@@ -67,22 +80,24 @@ const ProductSlider: FC = ({ children }) => {
         className="relative keen-slider h-full transition-opacity duration-150"
         style={{ opacity: isMounted ? 1 : 0 }}
       >
-        <div className={s.control}>
-          <button
-            onClick={slider?.prev}
-            className={cn(s.leftControl)}
-            aria-label="Previous Product Image"
-          >
-            <ChevronLeft />
-          </button>
-          <button
-            onClick={slider?.next}
-            className={cn(s.rightControl)}
-            aria-label="Next Product Image"
-          >
-            <ChevronRight />
-          </button>
-        </div>
+        {slider && (
+          <div className={s.control}>
+            <button
+              className={cn(s.leftControl)}
+              onClick={slider.prev}
+              aria-label="Previous Product Image"
+            >
+              <ChevronLeft />
+            </button>
+            <button
+              className={cn(s.rightControl)}
+              onClick={slider.next}
+              aria-label="Next Product Image"
+            >
+              <ChevronRight />
+            </button>
+          </div>
+        )}
         {Children.map(children, (child) => {
           // Add the keen-slider__slide className to children
           if (isValidElement(child)) {
@@ -98,29 +113,29 @@ const ProductSlider: FC = ({ children }) => {
           }
           return child
         })}
-        {slider && (
-          <div className={cn(s.positionIndicatorsContainer)}>
-            {[...Array(slider.details().size).keys()].map((idx) => {
-              return (
-                <button
-                  aria-label="Position indicator"
-                  key={idx}
-                  className={cn(s.positionIndicator, {
-                    [s.positionIndicatorActive]: currentSlide === idx,
-                  })}
-                  onClick={() => {
-                    slider.moveToSlideRelative(idx)
-                  }}
-                >
-                  <div className={s.dot} />
-                </button>
-              )
-            })}
-          </div>
-        )}
       </div>
 
-      <div className={s.album}>{Children.map(children, (child) => child)}</div>
+      <a.div className={s.album} ref={thumbsContainerRef}>
+        {slider &&
+          Children.map(children, (child, idx) => {
+            if (isValidElement(child)) {
+              return {
+                ...child,
+                props: {
+                  ...child.props,
+                  className: cn(child.props.className, s.thumb, {
+                    [s.selected]: currentSlide === idx,
+                  }),
+                  id: `thumb-${idx}`,
+                  onClick: () => {
+                    slider.moveToSlideRelative(idx)
+                  },
+                },
+              }
+            }
+            return child
+          })}
+      </a.div>
     </div>
   )
 }