E-commerce using Next.JS

Community feedback

• 

  Can Cömertpay•440

  @cancomertpay

  Posted over 1 year ago

  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. :)

  00

  Marked as helpful