为什么我的横幅-我的三个横幅的文本-滑块中的图像仅显示在其中一个横幅上-图像挤在一起

Question

我正在使用 Next.js 构建一个电子商务项目。在创建横幅页面时，我为图像实现了

react-slick

滑块。但是，当我第一次插入一个图像时，我首先获得了多个图像渲染，但在随后添加另外两个图像时，它现在显示了预期的三个图像。这里的问题是，当我尝试向每个图像添加横幅文本时，它给了我一个意想不到的行为。每个横幅的所有文本都被挤满，仅显示在其中一张图像上，而在图像的其余部分上，则没有显示任何内容。

我不知道是什么原因导致了这种行为，因为我的代码没有抛出任何错误，使我难以调试。

这是我的横幅组件：

"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;

这是图像的外观。该图像是一个滑块，因此仅在此图像上显示其余所有文本（包括其本身）。

Answer 1

这里的问题是您将 BannerText 定位为绝对，而没有定义其引用父级。正如您在此处所做的那样，具有相对位置的最接近的父项不是代表 Slide 的 div，而是 Slider。这就是您的 BannerText 组件无法正确滑动的原因。有多种解决方案，但最简单的一种，根据您正在做的事情，是将直接父级（代表幻灯片）设置为相对，如下所示：

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