fucking clientX

example/src/App.js

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

example/src/index.css

@@ -15,9 +15,17 @@ code {
 
 .SliderImage {
     max-width: 375px;
+    margin-left: 200px;
 }
 .SliderImage::-webkit-scrollbar {
     display: none;
 }
 
+div {
+    margin: 10px;
+    padding: 20px;
+}
 
+img {
+    border: 1px dashed black;
+}

src/index.js

@@ -95,7 +95,7 @@ export const SliderImage = ({images = [], className, onChange, onClick, ...props
         }
         else {
             const viewPortWidth             = containerRef.current.getBoundingClientRect().width
-            const clickX                    = e.clientX
+            const clickX                    = e.clientX -e.target.getBoundingClientRect().x 
             const {scrollLeft}              = containerRef.current;
             if (clickX > viewPortWidth * 0.75) {
                 if (i < images.length -1){