"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?