Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – how to use buttons with the onClick method in the latest nextJS version 14.1.3

"use client"
import React, { useState } from "react";
import { FaChevronLeft, FaChevronRight } from "react-icons/fa";

export default function HeroSlider() {
  const images = [
    "/images/homepage/home-1.jpeg",
    "/images/homepage/home-2.jpg",
    "/images/homepage/home-3.jpg",
    "/images/homepage/home-4.jpg",
    "/images/homepage/home-5.jpg",
    "/images/homepage/home-6.jpg",
    "/images/homepage/home-7.jpg",
  ];
  const [currentImageIndex, setCurrentImageIndex] = useState(0);

  const nextImage = () => {
    setCurrentImageIndex((nextIndex) =>
    nextIndex === images.length - 1 ? 0 : nextIndex + 1
    );
  };

  const prevImage = () => {
    setCurrentImageIndex((prevIndex) =>
      prevIndex === 0 ? images.length - 1 : prevIndex - 1
    );
  };

  return (
    <div>
      <div style={{ position: "relative", width: "100%", height: "auto" }}>
        <img
          src={images[currentImageIndex]}
          alt="Your Image"
          style={{ width: "100%", height: "auto", objectFit: "cover" }}
        />
        <div
          style={{
            width: "5%",
            position: "absolute",
            top: "50%",
            left: "0",
            transform: "translateY(-50%)",
            zIndex: 1,
          }}
        >
          <button
            type="button"
            onClick={prevImage}
            className="absolute top-1/2 left-0 transform -translate-y-1/2 bg-transparent border-none"
          >
            <FaChevronLeft size={40} color="white" />
          </button>
        </div>
        <div
          style={{
            width: "5%",
            position: "absolute",
            top: "50%",
            right: "0",
            transform: "translateY(-50%)",
            zIndex: 1,
          }}
        >
          <button
            type="button"
            onClick={nextImage}
            className="absolute top-1/2 right-0 transform -translate-y-1/2 bg-transparent border-none"
          >
            <FaChevronRight size={40} color="white" />
          </button>
        </div>
      </div>
    </div>
  );
}

why do the nextImage and prevImage functions not work?

I’m making a slider hero component, so I applied the use state concept, and created the nextImage and prevImage functions to change the useState value via the button with the onClick method, but why isn’t that function called? Can anyone help me here?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Currently everything is running, it turns out there was an error when I wrapped the main children in layout.tsx with "main" which made everything not work, I wrapped what was running with "body"


  2. 0

    The Issue is with absolute path of image links in images array. Try

    const images = [
"images/homepage/hero-1.jpeg",
"images/homepage/hero-2.jpeg",
"images/homepage/hero-3.jpeg",
"images/homepage/hero-4.jpeg",
];

    Double check the extension of the images in your case. Match the exact name of the files.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search