# 37 - Image Carousel with Autoplay

### Description

Create an image carousel component that displays multiple images within a rotating carousel, automatically transitions between images at a specified interval, and provides controls for manual navigation.

### **Algorithm**

1. Create a React component for the image carousel
2. Define the images array and the current image index
3. Use the useState hook to manage the current image index
4. Create a function to handle the autoplay functionality
5. Create a function to handle the manual navigation controls
6. Render the image carousel with the current image and navigation controls

### Classes

* `ImageCarousel`: The main image carousel component
* `ImageSlide`: A single image slide component
* `NavigationControl`: A navigation control component

### Code

ImageCarousel.js

```javascript
import React, { useState, useEffect } from 'react';
import ImageSlide from './ImageSlide';
import NavigationControl from './NavigationControl';

const ImageCarousel = () => {
  const [currentImage, setCurrentImage] = useState(0);
  const [images, setImages] = useState([
    { src: 'image1.jpg', alt: 'Image 1' },
    { src: 'image2.jpg', alt: 'Image 2' },
    { src: 'image3.jpg', alt: 'Image 3' },
  ]);

  useEffect(() => {
    const autoplay = () => {
      setCurrentImage((currentImage + 1) % images.length);
    };
    const intervalId = setInterval(autoplay, 5000);
    return () => clearInterval(intervalId);
  }, [currentImage, images]);

  const handleNavigation = (direction) => {
    setCurrentImage((currentImage + direction) % images.length);
  };

  return (
    <div>
      <ImageSlide image={images[currentImage]} />
      <NavigationControl
        onNext={() => handleNavigation(1)}
        onPrev={() => handleNavigation(-1)}
      />
    </div>
  );
};

export default ImageCarousel;

```

ImageSlide.js

```javascript
import React from 'react';

const ImageSlide = ({ image }) => {
  return (
    <div>
      <img src={image.src} alt={image.alt} />
    </div>
  );
};

export default ImageSlide;
```

NavigationControl.js

```javascript
import React from 'react';

const NavigationControl = ({ onNext, onPrev }) => {
  return (
    <div>
      <button onClick={onPrev}>Prev</button>
      <button onClick={onNext}>Next</button>
    </div>
  );
};

export default NavigationControl;
```

### Explanation

The code creates an image carousel component that displays multiple images within a rotating carousel, automatically transitions between images at a specified interval, and provides controls for manual navigation. The component uses the useState hook to manage the current image index and the useEffect hook to handle the autoplay functionality. The component also defines a function to handle the manual navigation controls.

### Possible Future Enhancements

* Add support for more advanced autoplay options, such as pause on hover and autoplay delay
* Add support for more advanced navigation controls, such as pagination and keyboard navigation
* Add support for image captions and descriptions
* Use a library like React Slick for more advanced image carousel functionality


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://choubey.gitbook.io/react-coding-puzzles/37-image-carousel-with-autoplay.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.