Next.js + Tailwind CSS 滑块组件故障求助

"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 slideWidth = 80; // 每个滑块占容器宽度的80%，留出左右空间显示其他滑块

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

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

  return (
    <div className="relative w-full h-screen overflow-hidden bg-gray-900">
      <button
        className="absolute top-1/2 left-4 text-white text-2xl z-50 bg-black/30 p-2 rounded-full"
        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 gap-4"
          style={{
            // 核心计算：向左移动当前索引*滑块宽度，加上容器与滑块的差值的一半，让当前滑块居中
            transform: `translateX(calc(-${currentIndex * slideWidth}% + (100% - ${slideWidth}%)/2))`,
          }}
        >
          {textData.map((item, index) => (
            <div
              key={item.id}
              className={`w-[${slideWidth}%] h-full flex items-center justify-center transition-all duration-300`}
              style={{
                transform: index === currentIndex ? "scale(1.1)" : "scale(0.9)",
                opacity: index === currentIndex ? 1 : 0.6,
              }}
            >
              <div className="bg-black/50 text-white p-6 rounded-lg">
                <p className="text-xl font-bold text-center">{item.text}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
      <button
        className="absolute top-1/2 right-4 text-white text-2xl z-50 bg-black/30 p-2 rounded-full"
        onClick={handleNext}
      >
        {">"}
      </button>
    </div>
  );
}

关键修复点 #

1. 修正滑块宽度单位与布局 #

• 替换原代码中错误的w-[100vh]为百分比宽度（示例用80%），保证滑块宽度与容器宽度逻辑匹配，避免单位混乱导致的布局偏移。
• 添加gap-4保留滑块间距，优化视觉层次感。

2. 修复TranslateX计算逻辑 #

移除原硬编码的-40，改用动态计算逻辑：

transform: `translateX(calc(-${currentIndex * slideWidth}% + (100% - ${slideWidth}%)/2))`

• -currentIndex * slideWidth%：让列表向左移动对应索引的滑块总宽度，确保当前滑块定位到容器左侧起点。
• (100% - slideWidth%)/2：补充容器与滑块的宽度差的一半，让当前滑块完美居中。

3. 优化交互体验 #

• 将缩放、透明度样式统一整合，配合transition-all实现更流畅的过渡效果。
• 给按钮添加半透明背景与圆角，提升可点击性和视觉舒适度。

4. 解决初始显示与滑动异常 #

• 初始currentIndex为0时，计算后的TranslateX会让第一个滑块自动居中，解决原初始显示第三个元素的问题。
• 配合修复后的位移计算，滑动逻辑可正常遍历所有滑块，不会出现无法访问前两个元素、跳回第三个元素的异常。

内容的提问来源于stack exchange，提问作者DIoDOBrando