React.js make custom Carousel with image inside Next ,Previous button and thumbnail image

To implement the nextImage, prevImage, and selectImage logic, you can use state to keep track of the current image index and update it accordingly. Here's how you can modify the Carousel component to include these functions:

import React, { useState } from 'react';
import bike from "../src/assert/images/grid-list/bike.jpg";
import breakfast from "../src/assert/images/grid-list/breakfast.jpg";
import camera from "../src/assert/images/grid-list/camera.jpg";
import honey from "../src/assert/images/grid-list/honey.jpg";
import "./Carousel.css ";

//import image
const images = [bike,breakfast,camera,honey]; 
const CarouselProviders = () => {
    const [currentImageIndex, setCurrentImageIndex] = useState(0);

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

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

      const selectImage = (index) => {
        setCurrentImageIndex(index);
      };

  return (
    <div>
      {/* <div className="carousel-container">
      <div className="carousel">
        <div className="carousel-image">
          <img src={images[currentImageIndex]} alt={`Image ${currentImageIndex}`} />
        </div>
        <div className="carousel-controls">
          <button onClick={prevImage}>Previous</button>
          <button onClick={nextImage}>Next</button>
        </div>
      </div>
      <div className="thumbnail-container">
        {images.map((image, index) => (
          <img
            key={index}
            src={image}
            alt={`Thumbnail ${index}`}
            className={index === currentImageIndex ? 'active' : ''}
            onClick={() => selectImage(index)}
          />
        ))}
      </div>
    </div> */}

<div className="carousel-container">
<div className="carousel">
      <div className="carousel-image">
        <img src={images[currentImageIndex]} alt={`Image ${currentImageIndex}`} />
        <div className="carousel-controls">
          <button className="prev" onClick={prevImage}>Previous</button>
          <button className="next" onClick={nextImage}>Next</button>
        </div>
      </div>
      </div>
      <div className="thumbnail-container">
        {images.map((image, index) => (
          <img
            key={index}
            src={image}
            alt={`Thumbnail ${index}`}
            className={index === currentImageIndex ? 'active' : ''}
            onClick={() => selectImage(index)}
          />
        ))}
      </div>
    </div>
    </div>
  )
}

export default CarouselProviders

In the code above, the nextImage function increments the image index, and if it reaches the end of the images array, it loops back to the first image. The prevImage function decrements the image index and, if it reaches the first image, it loops back to the last image. The selectImage function sets the current image index to the selected thumbnail index.

Make css Carouse.css file.

.carousel-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.carousel {
  display: flex;
  align-items: center;
  /* width: 80%; */
  position: relative;
}

.carousel-image {
  /* width: 70%; */
  display: flex;
  justify-content: center;
  position: relative;
}

.carousel-image img {
  max-width: 100%;
  transition: transform 0.3s ease-in-out;
}

.carousel-controls {
  display: flex;
  justify-content: space-between;
  width: 100%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.carousel-controls button {
  background-color: #333;
  color: #fff;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}

.carousel-controls .prev {
  left: 0;
}

.carousel-controls .next {
  right: 0;
}

.thumbnail-container {
  display: flex;
  justify-content: center;
  width: 80%;
  margin-top: 20px;
}

.thumbnail-container img {
  width: 60px;
  height: 40px;
  margin: 0 10px;
  cursor: pointer;
}

.active {
  border: 2px solid #333;
}