slider sibling test

example/src/App.js

@@ -1,18 +1,27 @@
-import React from 'react'
+import React, {useState} from 'react'
 
-import { SliderImage } from 'react-scrollable-slider'
+import { SliderImage, SliderSiblingOnly } from 'react-scrollable-slider'
 //import 'react-scrollable-slider/dist/index.css'
 
-const images = ["images/7eda725de98d7b4a23489988a334e726_375.jpeg", "images/fa0cfb2c2f540f33eb179ab1af2a4416_375.jpeg", "static/media/banner_hor2.a5496732.png", "images/7eda725de98d7b4a23489988a334e726_375.jpeg", ].map(img => "https://mo-cosmetics.com/" + img)
+const images = ["images/7eda725de98d7b4a23489988a334e726_375.jpeg", 
+                "images/fa0cfb2c2f540f33eb179ab1af2a4416_375.jpeg", 
+                "images/d489fd20db3cf1cbd2685ff758338b8b_375.jpeg", 
+                "images/9c4cfaac1ae925bcd8839fd4a8914873_375.jpeg"].map(img => "https://mo-cosmetics.com/" + img)
+
 
 const App = () => {
   return (
       <div>
+        <SliderSiblingOnly images={images} 
+                     className="SliderImage"
+                     onChange={i => console.log('CHANGE TO', i)} 
+                     onClick={i => console.log('CLICK ON ', i)} />
+      { /*
         <SliderImage images={images} 
                      className="SliderImage"
                      onChange={i => console.log('CHANGE TO', i)} 
                      onClick={i => console.log('CLICK ON ', i)} 
-                     />
+                     /> */ }
       </div>
   )
 }

src/SliderImage.js

@@ -1,6 +1,6 @@
 import React, {useRef, useEffect, useState} from 'react'
 
-export default ({images = [], className, onChange, onClick, ref, ...props}) => {
+export default ({images = [], className, onChange, onClick, ref, siblingOnly, current:propCurrent, ...props}) => {
     const divRef                = useRef()
     const containerRef          = useRef()
     const autoscroll            = useRef(false)
@@ -12,15 +12,29 @@ export default ({images = [], className, onChange, onClick, ref, ...props}) => {
     const currentScrollPosition = useRef(0)
 
 
+    const widthSum = (total, img) => total + (img?.getBoundingClientRect().width || 0)
+
     useEffect(() => {
         if (divRef.current){
-            const div  = divRef.current
+            const div           = divRef.current
 
-            const totalWidth = imgs.reduce((total, img) => total + (img?.getBoundingClientRect().width || 0),0)
-            div.style.minWidth = totalWidth + 'px'
+            const totalWidth    = imgs.reduce(widthSum, 0)
+            div.style.minWidth  = totalWidth + 'px'
         }
     }, [divRef, imgs])
 
+    useEffect(() => {
+        setCurrent(propCurrent)
+        if (containerRef.current){
+            const scrollTo = imgs.slice(0,propCurrent).reduce(widthSum, 0)
+            console.log('SCROLL TO ON PROP CURRRENT', scrollTo)
+            containerRef.current.scrollTo(scrollTo, 0)
+            currentScrollPosition.current = scrollTo
+        }
+    },[propCurrent, imgs])
+
+    console.log('CURRENT', current)
+
     const scrollToCurrent = () => {
 
         const el = containerRef.current
@@ -41,7 +55,6 @@ export default ({images = [], className, onChange, onClick, ref, ...props}) => {
             }
         }
         step()
-        //if (milaCount !== current +1) set(current +1)
     }
 
     const onTouchEnd = () => {
@@ -77,7 +90,7 @@ export default ({images = [], className, onChange, onClick, ref, ...props}) => {
             }
             const offset = imgsWidth  - scrollLeft
             newCurrent   = i
-            currentScrollPosition.current = imgsWidth - (imgs?.[i].getBoundingClientRect().width || 0)
+            currentScrollPosition.current = imgsWidth - (imgs?.[i]?.getBoundingClientRect().width || 0)
             if (offset < viewPortWidth/2){
                 currentScrollPosition.current = imgsWidth 
                 newCurrent++
@@ -89,12 +102,12 @@ export default ({images = [], className, onChange, onClick, ref, ...props}) => {
     }
 
     const onScroll = e => {
-        //autoscroll.current = false
         if (autoscroll.current) return;
 
         if (timeout.current) clearInterval(timeout.current)
 
         timeout.current = setTimeout(onTouchEnd, 200)
+        e.preventDefault();
     }
 
     useEffect(scrollToCurrent, [current])

src/SliderSiblingOnly.js

@@ -0,0 +1,21 @@
+import React, {useRef, useEffect, useState} from 'react'
+import SliderImage from './SliderImage'
+export default ({images, current:propCurrent, onChange, ...props}) => {
+    const [current, setCurrent] = useState(0)
+    const currentImages         = [images[(current + images.length -1) % images.length], 
+                                   images[current], 
+                                   images[(current + 1) % images.length] 
+                                   ]
+
+    console.log(current, currentImages)
+
+
+    return  <SliderImage images={currentImages} 
+                         onChange={current3 => {
+                                        const newCurrent = (current + current3 -1 + images.length) % images.length
+                                        onChange(newCurrent) 
+                                        setCurrent(newCurrent)
+                                    }} 
+                         current={1}
+            {...props} />
+}

src/index.js

@@ -1,2 +1,3 @@
 import SliderImage from './SliderImage'
-export {SliderImage} 
+import SliderSiblingOnly from './SliderSiblingOnly.js'
+export {SliderImage, SliderSiblingOnly}