React onTouch event not functioning properly

JavaScript
1

I am trying to make a react carousel component with swipe options when accessed on touch screen device. So far I have been able to find only few tutorials about this type of React code. I tried some, but for some reason my images are moving only for small amount of space, no matter how big swipe is made on my touch screen. Here you can see my lines of code:

import React, {useState, useEffect} from 'react'
import IMGComp from './imgComp'
import './slider.scss'
import i1 from './images/image1.jpg'
import i2 from './images/image2.jpg'
import i3 from './images/image3.jpg'
import i4 from './images/image4.jpg'
import i5 from './images/image5.jpg'


export default function Slider () {
    let sliderArr = [<IMGComp src={i1}/>,<IMGComp src={i2}/>,<IMGComp src={i3}/>,<IMGComp src={i4}/>,<IMGComp src={i5}/>]
    
    const [x, setX] = useState(0)
    let touchPoint 

   /* useEffect(() => {
        (setX(x+change) + console.log(`this is new ${x}`));
      }, [touchmove]);*/


    const goLeft = () => {
        x===0? setX(-100*(sliderArr.length -1)) : setX(x+100)
    }
    const goRight = () => {
       (x=== -100*(sliderArr.length-1)) ? setX(0) : setX(x-100)
    }


    const touchstart = (event) =>{
        touchPoint = event.touches[0].clientX
    }
    const touchmove = (event) =>{
        let touch = event.touches[0]
        let change = Math.floor((touch.clientX - touchPoint)/10)
        if (change < 0 ) {
            
             (setX((change)*10) + console.log(`main point is ${change} moving to right`))
        } else { 
            (setX((change)*10) + console.log(`main point is ${change} moving to left`))
        }
        //event.preventDefault()
    }
   const touchend = (event) =>{
        let change = event.changedTouches[0].clientX - touchPoint
        let screenw = ((screen.width / 4)/10) 
        console.log(screenw)
        if (change> screenw) {
            console.log(`next screen ${screenw}`)
            (x=== -100*(sliderArr.length-1)) ? setX(0) : setX(x-100)
        } else {setX(x-(change*10))}
    }

    

    return (
        <div className="slider">
            {
                sliderArr.map((item, index)=>{
                    return(
                        <div key={index} className="slide" style={{transform: `translateX(${x}%)`}}
                        onTouchStart={touchstart}
                        onTouchMove={touchmove}
                        onTouchEnd={touchend}
                        >
                            {item}
                        </div>
                    ) 
                })
            }
            <button id="goLeft" onClick={goLeft}>left</button>
            <button id="goRight" onClick={goRight}>right</button>
           
        </div>
    )
}

Or you can access the whole repository on github: https://github.com/jilvins/carousel-with-swipes

Can someone tell me how to correct this Carousel item in order to make it usable for touch screens? Good info/tutorial sources about touch events and React based mobile web development would be greatly appreciated too.

2

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.