import { useKeenSlider } from 'keen-slider/react' import React, { Children, FC, isValidElement, useState, useRef, useEffect, } from 'react' import cn from 'classnames' 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, slidesPerView: 1, mounted: () => setIsMounted(true), slideChanged(s) { setCurrentSlide(s.details().relativeSlide) }, }) // 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 () => { if (sliderContainerRef.current) { sliderContainerRef.current!.removeEventListener( 'touchstart', preventNavigation ) } } }, []) return (
) })}
)} ) } export default ProductSlider