Currently, I am working on an ecommerce project with Next.js. One of the challenges I faced was while setting up my banner page that includes a react-slick slider for images. Initially, when I added just one image, I noticed multiple renderings of it, but upon adding two more images, it displayed all three images as expected. However, when I attempted to add text to each image's banner, I encountered unexpected behavior.
The issue arises where all the text I add is only showing on one image, and no text appears on the other images. Although my code is error-free, making it tough for me to debug this problem.
Here is the snippet of my banner component:
"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";
// Banner component code here
export default Banner;
And here is the snippet of my bannerText component:
import Container from "./Container";
import { motion } from "framer-motion";
interface Props {
title: string;
}
// BannerText component code here
export default BannerText;
The screenshot showcases how all the text is stacked on one image within the slider, neglecting the other images: