在React中实现一个轻巧的滑动轮播

2024-01-27 22:49:07

尽管Swiper是一个强大的滑动轮播库，但在某些情况下，使用它可能是大材小用。对于需要一个更轻量级且定制化的解决方案的项目，在React中实现自己的滑动轮播可能是更合适的选择。

理解滑动轮播的工作原理

滑动轮播的工作原理是将一组图像或项目放在一个容器中，然后使用箭头或手势在它们之间滑动。要实现这一功能，我们需要创建一个具有以下特征的组件：

一个容器来容纳项目
一个用于滑动项目的机制
导航控件（可选）

使用React Hooks构建滑动轮播

让我们使用React Hooks来构建一个简单的滑动轮播组件。我们将使用useState和useEffect Hooks来管理组件的状态和效果。

import React, { useState, useEffect } from "react";

const Slider = ({ items }) => {
  const [activeIndex, setActiveIndex] = useState(0);
  const [transition, setTransition] = useState("transform 500ms ease-in-out");

  const handleNext = () => {
    setActiveIndex((prevIndex) => {
      return prevIndex + 1;
    });
  };

  const handlePrev = () => {
    setActiveIndex((prevIndex) => {
      return prevIndex - 1;
    });
  };

  useEffect(() => {
    if (activeIndex >= items.length) {
      setActiveIndex(0);
    } else if (activeIndex < 0) {
      setActiveIndex(items.length - 1);
    }
  }, [activeIndex, items]);

  return (
    <div className="slider">
      {items.map((item, index) => (
        <div
          className="slide"
          key={index}
          style={{
            transform: `translateX(${-activeIndex * 100}%)`,
            transition,
          }}
        >
          {item}
        </div>
      ))}
      <button onClick={handlePrev}>&#8249;</button>
      <button onClick={handleNext}>&#8250;</button>
    </div>
  );
};

export default Slider;