在 reactjs 中创建带分页的组图像滑块

Question

我正在尝试创建一个带分页的水平组图像滑块（类似于 React Native 中的平面列表），但我最近 2 天一直在努力这样做。

我想做的与此类似

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

我正在尝试添加的功能：

5 张图片设置为显示给用户的活动图片，如果用户
单击左键 ==> 显示前 5 张图片而不是当前图片
如果用户单击右键 ==> 显示接下来的 5 张图片而不是活动图片
分页应该在用户点击按钮时更新（重要：每个索引代表一组图片...5张图片=>分页中的1个索引）

我尝试解决这个问题的方式：

1- 使用 createRef 为每个图像容器创建 ref

  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

中描述的属性和方法来完成

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>

在 reactjs 中创建带分页的组图像滑块

creating group image slider with pagination in reactjs

javascript

carousel

reactjs

react-native