在reactjs中使用分页创建组图像滑块

Question

我正在尝试创建具有分页功能的水平组图像滑块（类似于react native中的平面列表），但是最近2天我一直在努力这样做。

我试图做的事情与此相似

我能够轻松创建html / css，但问题是实现了滑块的逻辑

我要添加的功能：

1. 5张图像设置为活动图像，如果用户显示，则向用户显示

2. 单击左键==>前5张图像而不是活动图像

3. 如果用户单击右键==>接下来的5张图像将显示，而不是活动的图像。

用户单击按钮时，应更新

4. 分页（重要：每个索引 代表一组图像... 5张图像=>分页中的1个索引）

我尝试解决此问题的方式：

1-使用每个图像容器的createRef创建的引用

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

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

      refsArray.push(newRef);
    });

    setRefs(refsArray);
  }, []);

2-使用这种方法将主数组切成3个不同的部分（上一个，下一个活动）：

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

3-逻辑添加到按钮

  //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`;
        });
       }

其他节点： 我在同一项目中创建了一个轮播...我这样做没有问题，但是在特定情况下实现此功能并没有很好。

谢谢您的任何建议：）

Answer 1

签出react-slideshow-image 这是一个用于React.js的幻灯片组件，支持幻灯片，淡入淡出和缩放。 here

所描述的属性和方法可以满足您的大部分需求

{}