Next.js电商项目react-slick滑块Banner文本重叠显示问题求助

问题 #

使用Next.js开发电商项目，用react-slick实现Banner滑块组件。最初仅添加单张图片时出现重复渲染问题，新增两张图片后显示恢复正常。但为每张Banner图片添加BannerText组件时出现异常：所有Banner的文本内容全部堆叠显示在同一张滑块图片上，其余图片无文本显示，且代码未抛出任何错误。

相关代码 #

Banner组件 #

"use client";

import Slider from "react-slick";
import Image from "next/image";
import BannerText from "./BannerText";
import bannerone from "@/images/bannerone.jpg";
import bannertwo from "@/images/bannertwo.jpg";
import bannerthree from "@/images/bannerthree.jpg";
import { PiCaretLeftLight, PiCaretRightLight } from "react-icons/pi";

const Banner = () => {
  const NextArrow = (props: any) => {
    const { onClick } = props;
    return (
      <div
        className="p-3 bg-slate-100 hover:text-orange-600 hover:bg-white cursor-pointer duration-200  rounded-full text-2xl flex items-center justify-center z-20 absolute left-5 top-1/2"
        onClick={onClick}
      >
        <PiCaretLeftLight />
      </div>
    );
  };

  const PrevArrow = (props: any) => {
    const { onClick } = props;
    return (
      <div
        className="p-3 bg-slate-100 hover:text-orange-600 hover:bg-white cursor-pointer duration-200 rounded-full text-2xl flex items-center justify-center z-20 absolute right-5 top-1/2"
        onClick={onClick}
      >
        <PiCaretRightLight />
      </div>
    );
  };

  let settings = {
    dots: false,
    infinite: false,
    autoplay: true,
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: true,
    nextArrow: <NextArrow />,
    prevArrow: <PrevArrow />,
  };

  return (
    <div className="relative">
      <Slider {...settings}>
        <div>
          <Image
            src={bannerone}
            alt="bannerone"
            priority={false}
            className="w-full h-full relative"
          />
          <BannerText title="Outware Picks" />
        </div>
        <div>
          <Image
            src={bannertwo}
            alt="bannertwo"
            priority={false}
            className="w-full h-full relative"
          />
          <BannerText title="Seasonal Offers" />
        </div>
        <div>
          <Image
            src={bannerthree}
            alt="bannerthree"
            priority={false}
            className="w-full h-full relative"
          />
          <BannerText title="Best for men" />
        </div>
      </Slider>
    </div>
  );
};

export default Banner;

BannerText组件 #

import Container from "./Container";
import { motion } from "framer-motion";

interface Props {
  title: string;
}

const BannerText = ({ title }: Props) => {
  return (
    <div className="hidden lg:inline-block absolute top-0 left-0 w-full h-full">
      <Container className="flex h-full flex-col gap-y-6 justify-center">
        <motion.h2
          initial={{ y: 30, opacity: 0 }}
          whileInView={{ y: 0, opacity: 1 }}
          transition={{ duration: 0.5 }}
          className="text-7xl font-bold text-white"
        >
          {title}
        </motion.h2>
        <motion.p
          initial={{ y: 40, opacity: 0 }}
          whileInView={{ y: 0, opacity: 1 }}
          transition={{ duration: 0.6 }}
          className="text-lg text-slate-100"
        >
          Stock up on sportswear and limited edition collections on our <br />{" "}
          awesome mid-season sale.
        </motion.p>
        <motion.div
          initial={{ y: 50, opacity: 0 }}
          whileInView={{ y: 0, opacity: 1 }}
          transition={{ duration: 0.7 }}
          className="flex gap-x-4 mt-2"
        >
          <button className="py-3 px-6 rounded-full bg-slate-200 hover:bg-white duration-200 text-sm  uppercase font-semibold">
            Find out more
          </button>
          <button className="py-3 px-6 rounded-full bg-slate-200 hover:bg-white duration-200 text-sm uppercase font-semibold">
            Shop Now
          </button>
        </motion.div>
       </Container>
    </div>
  );
};

export default BannerText;

解决方案 #

问题核心原因 #

BannerText组件使用absolute定位，但它的直接父容器（每个滑块的<div>）没有设置relative定位。此时所有绝对定位的BannerText会向上寻找最近的relative父元素（即Banner组件最外层的.relative div）作为定位基准，导致全部文本堆叠在同一位置。

修复步骤 #

1. 给每个滑块的容器<div>添加relative类，让BannerText相对于当前图片容器定位：
   修改Banner组件中的滑块容器：

   <div className="relative">
     <Image
       src={bannerone}
       alt="bannerone"
       priority={false}
       className="w-full h-full"
     />
     <BannerText title="Outware Picks" />
   </div>
   

   另外两个滑块的<div>也需要添加relative类。

2. （可选）确保文本显示在图片上方，给BannerText的根div添加z-10类：

   <div className="hidden lg:inline-block absolute top-0 left-0 w-full h-full z-10">
   

完成以上修改后，每个BannerText会跟随对应的图片滑块显示，不会再出现堆叠问题。

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