I have been following a tutorial to create an eBay clone. One of the steps involves creating a carousel. However, when I add it, the carousel does not transition to the next page. I have attempted to uninstall and reinstall packages, but the issue persists. Being new to Next.js, I am unsure of what could be causing the problem. I also experimented with adding and removing the "use client" directive.
Upon inspecting the console, I noticed that there are no event listeners on the buttons, which seems strange to me. Any help or suggestions would be greatly appreciated. Below is my code:
"use client";
import Image from "next/image";
import { Carousel } from "react-responsive-carousel";
import "react-responsive-carousel/lib/styles/carousel.min.css";
export default function CarouselComp() {
return (
<>
<div className='max-w-[1200px] mx-auto'>
<Carousel showArrows={true} autoPlay={true} interval={3000} infiniteLoop={true} showThumbs={false}>
<div>
<Image src={"/images/banner/1.png"} alt="Banner image" width={1200} height={300}/>
</div>
<div>
<Image src="/images/banner/2.png" alt="Banner image" width={1200} height={300}/>
</div>
<div>
<Image src="/images/banner/3.png" alt="Banner image" width={1200} height={300} />
</div>
</Carousel>
</div>
</>
);
};
Here is my package.json for reference:
{
// Package JSON goes here
}
Having deviated slightly from the tutorial by incorporating TypeScript and Next/Image, I wonder if these modifications may be contributing to the issues at hand.
No action occurs when clicking on any buttons in the carousel, and the autoplay feature fails to work as expected. To visualize the current state of the application, you can view this image.