Почему мой текст-баннер для трех моих изображений-баннеров в слайдере отображается только на одном из изображений-баннер ⇐ CSS

[Anonymous]

Я создаю проект электронной коммерции, используя Next.js. Создавая свою баннерную страницу, я реализовал удобный слайдер для своих изображений. Однако сначала я получил множественный рендеринг изображений, когда впервые вставил одно изображение, но при последующем добавлении еще двух теперь отображались ожидаемые три изображения. Проблема здесь в том, что когда я попытался добавить текст баннера к каждому изображению, это привело к неожиданному поведению. Весь текст для каждого баннера перегружен и отображается только на одном изображении, а на остальной части изображения ничего не отображается.
Я не знаю, за что может быть ответственность такое поведение, поскольку мой код не выдает никаких ошибок, что затрудняет отладку. Пожалуйста, помогите, я могу что-нибудь сделать, чтобы исправить эту ситуацию.
Вот мой компонент баннера:

Код: Выделить всё

"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 (
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}
>

);
};

const PrevArrow = (props: any) => {
const { onClick } = props;
return (
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}
>


);
};

let settings = {
dots: false,
infinite: false,
autoplay: true,
slidesToShow: 1,
slidesToScroll: 1,
arrows: true,
nextArrow: ,
prevArrow: ,
};

return (














);
};

export default Banner;

И мой компонент BannerText:

Код: Выделить всё

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

interface Props {
title: string;
}

const BannerText = ({ title }: Props) => {
return (



{title}


Stock up on sportswear and limited edition collections on our
{"  "}
awesome mid-season sale.



Find out more


Shop Now




);
};

export default BannerText;

Это внешний вид изображения. изображение представляет собой слайдер, поэтому только на нем отображается весь остальной текст, включая его самого.

Подробнее здесь: https://stackoverflow.com/questions/784 ... -on-one-of