E-commerce using Next.JS

Hi Josh,

You can try more basic carousel logic like this:

...

const [currentImgIndex, setCurrentImgIndex] = useState(0);

  const nextImage = () => {
    if (currentImgIndex < images.length - 1) {
      setCurrentImgIndex((prev) => prev + 1);
    } else {
      setCurrentImgIndex(0);
    }
  };

  const prevImage = () => {
    setCurrentImgIndex((prev) => prev - 1);
    if (currentImgIndex === 0) {
      setCurrentImgIndex(images.length - 1);
    }
  };

  const handleThumbnailClick = (index) => {
    setCurrentImgIndex(index);
  };

...

    return images.map((item,index) => (
    <div
      style={{
        opacity: index === currentImgIndex ? 1 : 0,
        transition: "opacity 1s ease",
        width: index === currentImgIndex ? "100%" : "auto",
      }}
    >
      <img
        src={item}
        alt={"..."}
      />
    </div>
))

This was just an example to explain the logic, I hope it helped. :)