Nextjs中react-slick轮播组件内部元素无法点击求助

问题重现 #

在Next.js项目中使用react-slick或react-owl-carousel时，轮播区域内的Image、Link等元素无法被点击，添加z-index属性后问题仍未解决。相关组件代码如下：

MealSlider组件 #

"use client";
import React from "react";
import Slider from "react-slick";
import Slide from "../Slide/page";
import { useSelector } from "react-redux";
const MealSlider = () => {
  const allMeals = useSelector((state) => state.meals.data);
  const mealsToShow= [];
  for (let i in allMeals) {
    mealsToShow.push({
      id: allMeals[i].id,
      title: allMeals[i]?.title,
      imageUrl: allMeals[i]?.imageUrl[0],
      mealRating: allMeals[i]?.mealRating,
      flag: allMeals[i]?.flag,
      calories: allMeals[i]?.calories,
      servings: allMeals[i]?.servings,
      duration: allMeals[i]?.duration,
      ingredients: allMeals[i]?.ingredients,
    });
  }
  meals.sort(function (a, b) {
    return b.mealRating - a.mealRating;
  });


  const setting = {
    dots: true,
    infinite: true,
    slideToShow: 1,
    slidesToScroll: 1,
    autoplay: true,
    pauseOnHover: false,
  };
  return (
    <div>
      <Slider {...setting}>
        {mealsToShow.map((item, index) => (
          <Slide
            key={index}
            id={item.id}
            title={item.title}
            image={item.imageUrl}
            flag={item.flag}
            calories={item.calories}
            servings={item.servings}
            duration={item.duration}
            ingredients={item.ingredients}
          />
        ))}
      </Slider>
    </div>
  );
};

export default MealSlider;

Slide组件 #

import Image from "next/image";
import React from "react";
import Flag from "react-world-flags";
import { GiTimeBomb, GiPowerLightning, GiChefToque } from "react-icons/gi";
import { IoIosPeople } from "react-icons/io";
import styles from "../UI/Card/Card.module.css";
import Link from "next/link";

const Slide = ({
  image,
  title,
  flag,
  calories,
  servings,
  duration,
  ingredients,
  id,
  mealRating,
}) => {
 
  return (
    <div className=" bg-gray-100 rounded-lg">
      <div className="flex p-4">
        <div className="slider_image bg-white">
          <Image
            className="p-2 "
            src={image}
            alt={title}
            width={500}
            height={400}
          ></Image>
        </div>
        <div className="flex-1 flx justify-center ">
          <h3 className="text-primary mt-5 font-bold text-base text-center">
            {title}
          </h3>
          <div className="bg-white mt-6 rounded-md mx-2 flex justify-between px-2 items-center">
            <Flag code={flag} height="16" fallback={<span>{}</span>} />

            <div className="flex hover:underline justify-between items-center">
              <h6 className="mr-1">
                {"السعرات الحرارية : "}
                {calories}
              </h6>
              <GiPowerLightning style={{ color: "#ed6109" }} />
            </div>
            <div className="flex hover:underline justify-between items-center">
              <h6 className="mr-1">
                {"الافراد : "}
                {servings}
              </h6>
              <IoIosPeople style={{ color: "#ed6109" }} />
            </div>
            <div className="flex hover:underline justify-between items-center">
              <h6 className="mr-1">
                {" وقت الطهي : "}
                {duration}
              </h6>
              <GiTimeBomb style={{ color: "#ed6109" }} />
            </div>
          </div>
          <div className="p-6 mt-10 rounded-lg mx-2 flex justify-center items-center">
            <h4 className={`${styles.ingredients} text-center`}>
              {ingredients}
            </h4>
          </div>
          <div className="flex justify-center cursor-pointer">
            <Link
              className="bg-primary px-6 py-2 rounded-md text-white no-underline hover:bg-accent hover:text-gray-50"
              href={`/showRecipe/${id}`}
            >
              المزيد
            </Link>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Slide;

问题原因分析 #

1. CSS类拼写错误：Slide组件中存在flx的错误类名，应为flex，导致布局错乱，元素点击区域被挤压或遮挡。
2. 轮播指示器（dots）层级覆盖：react-slick的默认dots容器会覆盖在轮播内容上方，阻止底层元素的点击事件。
3. Next.js Image组件布局问题：固定宽高的Image可能导致容器布局异常，间接影响点击区域。

修复步骤 #

1. 修复Slide组件的CSS类错误 #

将Slide中的flx改为flex，确保布局正常：

// 原代码
<div className="flex-1 flx justify-center ">
// 修改后
<div className="flex-1 flex justify-center ">

2. 调整轮播指示器的点击行为 #

修改MealSlider的轮播配置，自定义dots样式并限制其点击范围，避免覆盖内容：

const setting = {
  dots: true,
  infinite: true,
  slideToShow: 1,
  slidesToScroll: 1,
  autoplay: true,
  pauseOnHover: false,
  // 自定义dots，仅让按钮可点击
  customPaging: (i) => (
    <div style={{ pointerEvents: 'none' }}>
      <button style={{ pointerEvents: 'auto' }}></button>
    </div>
  ),
  // 自定义dots类名，方便调整样式
  dotsClass: 'slick-dots custom-carousel-dots'
};

添加对应的CSS（可放在全局样式或组件样式中）：

.custom-carousel-dots {
  position: absolute;
  bottom: 1rem;
  z-index: 10;
  /* 调整dots位置，避免遮挡内容 */
}
.custom-carousel-dots li {
  pointer-events: none;
}
.custom-carousel-dots li button {
  pointer-events: auto;
  /* 自定义按钮样式 */
}

3. 优化Next.js Image组件的布局 #

使用fill模式配合容器的相对定位，确保Image自适应容器且不干扰点击：

// 原代码
<div className="slider_image bg-white">
  <Image
    className="p-2 "
    src={image}
    alt={title}
    width={500}
    height={400}
  ></Image>
</div>
// 修改后
<div className="slider_image bg-white relative w-64 h-64"> {/* 可根据需求调整宽高 */}
  <Image
    className="p-2 object-cover"
    src={image}
    alt={title}
    fill
    priority // 可选，优化首屏加载
  ></Image>
</div>

4. 检查父元素的pointer-events属性 #

确保轮播容器及上层元素未设置pointer-events: none，该属性会阻止所有子元素的点击事件。

验证修复 #

完成上述修改后，重新运行项目，轮播区域内的Image、Link等元素应可正常响应点击。

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