React.js make custom Carousel with image inside Next ,Previous button and thumbnail image
Published: 2023-10-18 06:52:14

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;
}
```