yet another buggy version like for prod

src/SliderSiblingOnly.js

@@ -12,8 +12,6 @@ export default ({images = [], imgWidth=377, className, onChange, onClick, ref, s
     const imgs                  = useRef([])
     const currentRef            = useRef(propCurrent)
     const diffRef               = useRef(0)
-    //const [currentImages, setCurrentImages]       = useState([])
-    //const [current, setCurrent] = useState(0)
 
     const getCurrentImages = (current) => { 
         return [
@@ -26,26 +24,12 @@ export default ({images = [], imgWidth=377, className, onChange, onClick, ref, s
 
     let currentImages = getCurrentImages(currentRef.current)
 
-    //useEffect(() => {
-        //if (containerRef.current){
-            //const scrollTo = imgs?.[0]?.getBoundingClientRect().width
-            //containerRef.current.scrollTo(scrollTo, 0)
-            //currentScrollPosition.current = scrollTo
-            //console.log('scrollTo', scrollTo)
-            //setCurrent(propCurrent)
-        //}
-    //},[propCurrent, containerRef.current])
 
     useEffect(() => {
         if (containerRef.current)
             containerRef.current.scrollTo({left: imgWidth, behavior: 'auto'})
     }, [containerRef.current])
 
-    //useEffect(() => {
-        //autoscroll.current = true
-        //onScroll()
-    //}, [current])
-
 
 
     const onTouchEnd = () => {
@@ -53,10 +37,6 @@ export default ({images = [], imgWidth=377, className, onChange, onClick, ref, s
             setTimeout(onTouchEnd, 20)
         console.log('TOUCH END', inTouch.current, autoscroll.current, afterAutoscroll.current, 
                                  containerRef.current.scrollLeft, containerRef.current.scrollWidth)
-        //if (afterAutoscroll.current) {
-            //afterAutoscroll.current = false
-            //return;
-        //}
         if (inTouch.current){
             if (timeout.current) clearInterval(timeout.current)
 
@@ -148,11 +128,11 @@ export default ({images = [], imgWidth=377, className, onChange, onClick, ref, s
             const clickX                    = e.clientX -e.target.getBoundingClientRect().x 
             const {scrollLeft}              = containerRef.current;
             if (clickX > viewPortWidth * 0.75) {
-                containerRef.current.scrollTo({left: scrollLeft + imgWidth*0.7, behavior: 'auto'})
+                containerRef.current.scrollTo({left: scrollLeft + imgWidth*0.8, behavior: 'auto'})
                 onTouchEnd()
             }
             else if (clickX < viewPortWidth * 0.25) {
-                containerRef.current.scrollTo({left: scrollLeft - imgWidth*0.7, behavior: 'auto'})
+                containerRef.current.scrollTo({left: scrollLeft - imgWidth*0.8, behavior: 'auto'})
                 onTouchEnd()
             }
             else if (typeof onClick === 'function'){
@@ -210,8 +190,3 @@ export default ({images = [], imgWidth=377, className, onChange, onClick, ref, s
 }
 
 
-                //{currentImages.map((image, i) => <img  src={image} 
-                                                //key={`image_${(i + current -1 +images.length) % images.length}`} 
-                                                //alt={`image ${(i + current -1 +images.length) % images.length}`} 
-                                                //onClick={e => onImgClick(e, i)}
-                                                ///>)}