0

I'm trying to do a React automatic slideshow that starts automatic the slideshow after page loading/render. At this point I only be able to insert a button and change the slides after clicking them. I want to add auto slideshow functionality but i dont know how to add that functionality in this code. Can any one help please?

can any one add auto slideshow function in this code?

import React, {useState} from 'react'
import './Slider.css'
import BtnSlider from './BtnSlider'
import dataSlider from './dataSlider'

export default function Slider() {

    const [slideIndex, setSlideIndex] = useState(1)

    const nextSlide = () => {
        if(slideIndex !== dataSlider.length){
            setSlideIndex(slideIndex + 1)
        } 
        else if (slideIndex === dataSlider.length){
            setSlideIndex(1)
        }
    }

    const prevSlide = () => {
        if(slideIndex !== 1){
            setSlideIndex(slideIndex - 1)
        }
        else if (slideIndex === 1){
            setSlideIndex(dataSlider.length)
        }
    }

    const moveDot = index => {
        setSlideIndex(index)
    }

    return (
        <div className="container-slider">
            {dataSlider.map((obj, index) => {
                return (
                    <div
                    key={obj.id}
                    className={slideIndex === index + 1 ? "slide active-anim" : "slide"}
                    >
                        <img 
                        src={process.env.PUBLIC_URL + `/images/img${index + 1}.jpg`} 
                        />
                    </div>
                )
            })}
            <BtnSlider moveSlide={nextSlide} direction={"next"} />
            <BtnSlider moveSlide={prevSlide} direction={"prev"}/>

            <div className="container-dots">
                {Array.from({length: 5}).map((item, index) => (
                    <div 
                    onClick={() => moveDot(index + 1)}
                    className={slideIndex === index + 1 ? "dot active" : "dot"}
                    ></div>
                ))}
            </div>
        </div>
    )
}
Jenil
  • 31
  • 3

1 Answers1

0

This will call your nextSlide function every 5 seconds.

useEffect(() => {
  const slideInterval = setInterval(() => {
     nextSlide()
  }, 5000);
  return () => clearInterval(slideInterval);
}, [slideIndex]);

Working example: https://codesandbox.io/live/a1dd4cecd03?file=/src/components/Slider/Slider.js

rastiq
  • 343
  • 1
  • 6