diff --git a/components/product/ProductSlider/ProductSlider.tsx b/components/product/ProductSlider/ProductSlider.tsx index 6a8b7783e..0756edcda 100644 --- a/components/product/ProductSlider/ProductSlider.tsx +++ b/components/product/ProductSlider/ProductSlider.tsx @@ -1,5 +1,5 @@ import { useKeenSlider } from 'keen-slider/react' -import React, { Children, FC, isValidElement, useState } from 'react' +import React, { Children, FC, isValidElement, useState, useRef, useEffect } from 'react' import cn from 'classnames' import s from './ProductSlider.module.css' @@ -7,6 +7,7 @@ import s from './ProductSlider.module.css' const ProductSlider: FC = ({ children }) => { const [currentSlide, setCurrentSlide] = useState(0) const [isMounted, setIsMounted] = useState(false) + const sliderContainerRef = useRef(null) const [ref, slider] = useKeenSlider({ loop: true, @@ -17,8 +18,35 @@ const ProductSlider: FC = ({ children }) => { }, }) + // Stop the history navigation gesture on touch devices + useEffect(() => { + const preventNavigation = (event: TouchEvent) => { + // Center point of the touch area + const touchXPosition = event.touches[0].pageX + // Size of the touch area + const touchXRadius = event.touches[0].radiusX || 0 + + // We set a threshold (10px) on both sizes of the screen, + // if the touch area overlaps with the screen edges + // it's likely to trigger the navigation. We prevent the + // touchstart event in that case. + if ( + touchXPosition - touchXRadius < 10 || + touchXPosition + touchXRadius > window.innerWidth - 10 + ) event.preventDefault() + } + + sliderContainerRef.current! + .addEventListener('touchstart', preventNavigation) + + return () => { + sliderContainerRef.current! + .removeEventListener('touchstart', preventNavigation) + } + }, []) + return ( -
+