Next.js 14.1.3中Slider组件onClick切换函数失效问题求助

核心问题：定位冲突导致按钮点击区域失效 #

你的代码中，按钮的父容器与按钮本身重复使用绝对定位和垂直居中属性，导致按钮实际可点击区域偏移或被压缩，最终使nextImage和prevImage函数无法触发。

具体问题点 #

• 父容器已通过position: absolute、top: 50%、transform: translateY(-50%)实现垂直居中，但按钮又重复设置absolute top-1/2 transform -translate-y-1/2，双重垂直居中导致按钮位置偏移，脱离父容器可点击范围。
• 父容器仅设置宽度5%，未设置高度，实际高度为0，进一步压缩了按钮的可点击区域。

修复后的代码 #

调整按钮容器与按钮的定位逻辑，让按钮占满父容器可点击区域，确保点击事件正常触发：

"use client"
import React, { useState } from "react";
import { FaChevronLeft, FaChevronRight } from "react-icons/fa";

export default function HeroSlider() {
  const images = [
    "/images/homepage/home-1.jpeg",
    "/images/homepage/home-2.jpg",
    "/images/homepage/home-3.jpg",
    "/images/homepage/home-4.jpg",
    "/images/homepage/home-5.jpg",
    "/images/homepage/home-6.jpg",
    "/images/homepage/home-7.jpg",
  ];
  const [currentImageIndex, setCurrentImageIndex] = useState(0);

  const nextImage = () => {
    setCurrentImageIndex((nextIndex) =>
      nextIndex === images.length - 1 ? 0 : nextIndex + 1
    );
  };

  const prevImage = () => {
    setCurrentImageIndex((prevIndex) =>
      prevIndex === 0 ? images.length - 1 : prevIndex - 1
    );
  };

  return (
    <div>
      <div style={{ position: "relative", width: "100%", height: "auto" }}>
        <img
          src={images[currentImageIndex]}
          alt="Your Image"
          style={{ width: "100%", height: "auto", objectFit: "cover" }}
        />
        {/* 左侧按钮容器 */}
        <div
          style={{
            width: "5%",
            height: "100%",
            position: "absolute",
            top: 0,
            left: 0,
            zIndex: 1,
          }}
        >
          <button
            type="button"
            onClick={prevImage}
            className="w-full h-full flex items-center justify-center bg-transparent border-none cursor-pointer"
          >
            <FaChevronLeft size={40} color="white" />
          </button>
        </div>
        {/* 右侧按钮容器 */}
        <div
          style={{
            width: "5%",
            height: "100%",
            position: "absolute",
            top: 0,
            right: 0,
            zIndex: 1,
          }}
        >
          <button
            type="button"
            onClick={nextImage}
            className="w-full h-full flex items-center justify-center bg-transparent border-none cursor-pointer"
          >
            <FaChevronRight size={40} color="white" />
          </button>
        </div>
      </div>
    </div>
  );
}

额外优化建议 #

• 给按钮添加hover半透明背景样式，提升用户交互感知。
• 添加tabIndex属性，确保按钮可通过键盘访问，增强页面无障碍性。

内容的提问来源于stack exchange，提问作者Rizky Ajie Kurniawan