onchange, onclick, left right clicks

example/src/App.js

@@ -7,7 +7,11 @@ const images = ["images/7eda725de98d7b4a23489988a334e726_375.jpeg", "images/fa0c
 
 const App = () => {
   return (
-        <SliderImage images={images} className="SliderImage"/>
+        <SliderImage images={images} 
+                     className="SliderImage"
+                     onChange={i => console.log('CHANGE TO', i)} 
+                     onClick={i => console.log('CLICK ON ', i)} 
+                     />
   )
 }
 

src/index.js

@@ -1,6 +1,6 @@
 import React, {useRef, useEffect, useState} from 'react'
 
-export const SliderImage = ({images = [], className, ...props}) => {
+export const SliderImage = ({images = [], className, onChange, onClick, ...props}) => {
     const divRef                = useRef()
     const containerRef          = useRef()
     const autoscroll            = useRef(false)
@@ -10,6 +10,7 @@ export const SliderImage = ({images = [], className, ...props}) => {
     const [current, setCurrent] = useState(0)
     const currentScrollPosition = useRef(0)
 
+
     useEffect(() => {
         if (divRef.current){
             const div  = divRef.current
@@ -81,12 +82,43 @@ export const SliderImage = ({images = [], className, ...props}) => {
             }
             setCurrent(newCurrent)
             if (newCurrent === current) scrollToCurrent()
+            else if (typeof onChange === 'function') onChange(newCurrent)
         }, 200)
-
     }
 
     useEffect(scrollToCurrent, [current])
 
+    const onImgClick = (e, i) => {
+        const touchDevice = (navigator.maxTouchPoints || 'ontouchstart' in document.documentElement);
+        if (touchDevice && typeof onClick === 'function'){
+            onClick(i)
+        }
+        else {
+            const viewPortWidth             = containerRef.current.getBoundingClientRect().width
+            const clickX                    = e.clientX
+            const {scrollLeft}              = containerRef.current;
+            if (clickX > viewPortWidth * 0.75) {
+                if (i < images.length -1){
+                    currentScrollPosition.current = scrollLeft + (imgs?.[i].getBoundingClientRect().width || 0)
+                    setCurrent(i +1)
+                    scrollToCurrent()
+                    if (typeof onChange === 'function') onChange(i +1)
+                }
+            }
+            else if (clickX < viewPortWidth * 0.25) {
+                if (i > 0){
+                    currentScrollPosition.current = scrollLeft - (imgs?.[i-1].getBoundingClientRect().width || 0)
+                    setCurrent(i -1)
+                    scrollToCurrent()
+                    if (typeof onChange === 'function') onChange(i -1)
+                }
+            }
+            else if (typeof onClick === 'function'){
+                onClick(i)
+            }
+        }
+    }
+
     return (
         <div className={className} 
              style={{cssText: `overflow: auto; -ms-overflow-style: none; scrollbar-width: none`}}
@@ -97,6 +129,7 @@ export const SliderImage = ({images = [], className, ...props}) => {
                                                 key={`image_${i}`} 
                                                 alt={`image ${i}`} 
                                                 onLoad={e => {imgs[i] = e.target; setImgs([...imgs]) }}
+                                                onClick={e => onImgClick(e, i)}
                                                 />)}
             </div>
         </div>