"use client";
import React, { useState } from "react";

const textData = [
  {
    id: 1,
    text: "Text 1 Description",
  },
  {
    id: 2,
    text: "Text 2 Description",
  },
  {
    id: 3,
    text: "Text 3 Description",
  },
  {
    id: 4,
    text: "Text 4 Description",
  },
  {
    id: 5,
    text: "Text 5 Description",
  },
];

export default function TextSlider() {
  const [currentIndex, setCurrentIndex] = useState(0);

  const handlePrev = () => {
    setCurrentIndex(
      (prevIndex) => (prevIndex - 1 + textData.length) % textData.length
    );
  };

  const handleNext = () => {
    setCurrentIndex((prevIndex) => (prevIndex + 1) % textData.length);
  };

  return (
    <div className="relative w-full h-screen overflow-hidden">
      <button
        className="absolute top-1/2 left-4 text-white text-2xl z-50"
        onClick={handlePrev}
      >
        {"<"}
      </button>
      <div className="w-full h-full flex items-center justify-center overflow-hidden">
        <div
          className="flex transition-transform duration-300 ease-in-out"
          style={{
            transform: `translateX(-${
              (currentIndex * 100) / textData.length - 40
            }%)`,
          }}
        >
          {textData.map((item, index) => (
            <div
              key={item.id}
              className={`w-[100vh] h-full flex items-center justify-center ${
                index === currentIndex ? "transform scale-125" : "opacity-75"
              }`}
            >
              <div className="bg-black bg-opacity-50 text-white p-4">
                <p className="text-lg font-bold text-center">{item.text}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
      <button
        className="absolute top-1/2 right-4 text-white text-2xl"
        onClick={handleNext}
      >
        {">"}
      </button>
    </div>
  );
}

字符串
1.我试图创建一个滑块，但有一个错误
TranslateX的工作效果并不好，比如当我有-{formula}时，我看不到1和2元素，当我有没有“-"的{formula}时，我看不到4和5，也是从元素3开始的，所以这是主要问题。如果我接下来滑动，当元素1和2处于活动状态时，它将保持在3上，但是当元素4处于活动状态时，它将滚动到它。
所以误差是：
1.元素3自动位于中心，因为translatex为0%，它将自动使用生成的元素作为div的中心
1.刷卡系统是不是真的工作，因为3是在中心，所以它会继续后5刷卡到空，直到它达到元素3，它会去它，所以元素1和2是不可达的
我试图通过在translatex值上添加-40来解决这个问题。这有点工作，因为刷卡停止在5，并从3重新开始。