creating group image slider with pagination in reactjs

Question

I'm trying to create a horizontal group image slider with pagination (similar to flat list in react native),but im struggling to do so the last 2 days.

what im trying to do is similar to this

I was able to create the html/css easily but the problem is implementing the logic for slider

features that im trying to add:

1. 5 images set as active images that shows to the user if the user

2. clicks the left button ==> previous 5 images shows instead of active ones

3. if the user clicks the right button ==> next 5 images shows instead of the active ones

4. pagination should be updated when the user clicks on the buttons (important: each index represent a group of images... 5 images=>1 index in the pagination)

the way I tried to approach this:

1- created ref using createRef for each image container

  useEffect(() => {
    const refsArray = [];

    data.forEach((item, index) => {
      //console.log(index);
      const newRef = createRef();

      refsArray.push(newRef);
    });

    setRefs(refsArray);
  }, []);

2- sliced the main array into 3 different parts (prev,active next) using this approach:

setPrevItems(refs.slice(startIndex - count, startIndex));
setActiveItems(refs.slice(startIndex, startIndex + count));
setNextItems(refs.slice(startIndex + count, startIndex + count + count));

3- logic added to buttons

  //left button handler

  const handleLeftClick = () => {
    
    //trying to hide the elments

    activeItems.forEach((item, index) => {
      item.current.style.left = `2000px`;
    });
    
   //trying to display previous items ... and using index to make them consecutive
    prevItems.forEach((item, index) => {
      item.current.style.left = `${300 * index}px`;
    });
   }


      //right button handler

      const handleRightClick = () => {
        activeItems.forEach((item, index) => {
          item.current.style.left = `-2000px`;
        });
    
        nextItems.forEach((item, index) => {
          item.current.style.left = `${300 * index}px`;
        });
       }

additional nodes: I created a carousel in the same project... and i have no problem doing so, but implementing this feature in specific didnt go well.

thank you for any advice in advance :)

Answer 1

check out react-slideshow-image It's a slide component that for React.js supports slide, fade, and zoom. Most of what you need can be accomplished with its properties and methods described here

const properties = {
autoPlay:false,
arrows: true,
}
/*SlideBanner represens each of your sectoins containing 5 images*/
const SlideBanner = (
    <div style={{flexDirection:'row'}}>
        <div className="imageContainer">
            <img src="your img number 1"/>
        </div>
        <div className="imageContainer">
            <img src="your img number 2"/>
        </div>
        ...
        <div className="imageContainer">
            <img src="your img number 5"/>
        </div>
     
    </div>
)

<Slide {...properties}>
    
   <SlideBanner/>
   <SlideBanner/>
   <SlideBanner/>
</Slide>