DEV Community

Utsav Mavani
Utsav Mavani

Posted on • Edited on

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

Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

Hostinger image

Get n8n VPS hosting 3x cheaper than a cloud solution

Get fast, easy, secure n8n VPS hosting from $4.99/mo at Hostinger. Automate any workflow using a pre-installed n8n application and no-code customization.

Start now

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay