In this article, we will learn how to make custom image slider with pure react js with Previous, Next, Auto Slide, thumb etc. It's very simple let's make it work.

const [image,setImage]=useState([

    'https://images.techopedia.com/images/uploads/web-developer.jpg',

    'https://www.betterteam.com/images/web-developer-job-description-6494x4331-2020128.jpeg?crop=4:3,smart&width=1200&dpr=2',

    'https://w10.naukri.com/mailers/2021/naukri-learning/oct/27oct-v2/What-is-Web-Developer.jpg',

    'https://www.roberthalf.com/sites/default/files/2020-06/web-developer-questions.jpg',

    'https://d3njjcbhbojbot.cloudfront.net/api/utilities/v1/imageproxy/https://images.ctfassets.net/wp1lcwdav1p1/gzZpBDV3nX1AWytfLhbgs/d528553697d959544c8ca5b80b6d8beb/web_developer.png?w=1500&h=680&q=60&fit=fill&f=faces&fm=jpg&fl=progressive&auto=format%2Ccompress&dpr=1&w=1000&h=',

    'https://res.cloudinary.com/highereducation/images/f_auto,q_auto/v1662131717/ComputerScience.org/CompSci_WebDev_Career_WebDev_day0in0life_4030594ab/CompSci_WebDev_Career_WebDev_day0in0life_4030594ab.jpg?_i=AA',

    'https://www.codingdojo.com/blog/wp-content/uploads/webdevmeeting.jpg',

    'https://s3-us-east-2.amazonaws.com/maryville/wp-content/uploads/2020/02/28151102/web-developers.jpg',

    'https://insights.dice.com/wp-content/uploads/2021/01/shutterstock_1233726961.jpg',

    'https://smsh-862737-juc1ugur1qwqqqo4.stackpathdns.com/2569356/wp-content/uploads/2020/11/AdobeStock_241083104-1400x934.jpg?size=1400x934&lossy=1&strip=1&webp=1',

    'https://www.herzing.edu/sites/default/files/styles/fp_640_288/public/images/blog/web_developer.jpg.webp?itok=QABkWNY0',

    'https://rasnatech.com/wp-content/uploads/2019/09/ProgrammersWeb-Developers.jpg',

    'https://www.qualitydevs.com/wp-content/uploads/2017/12/desarrollador.jpg',

  ])

 <Slider imgs={image}/>
import React,{useState,useEffect} from 'react'
import './Slider.css'
import { FaArrowRight,FaArrowLeft } from 'react-icons/fa';
const Slider = ({imgs}) => {
    const [index,setIndex]=useState(0);
    const autoScroll=true;
    let slideInterval;
    let intervalTime=2000;
    function auto () {
        slideInterval=setInterval(next,intervalTime);
    }
    useEffect(() => {
      if(autoScroll){
        auto()
      }
      return () => clearInterval(slideInterval);
    }, [index])
    const next = ()=>{
        if(index === imgs.length -1){
            setIndex(0)
        }else{
            setIndex(index+1)
        }
    }
    const prev = () =>{
        if(index === 0){
            setIndex(imgs.length -1)
        }else{
            setIndex(index-1)
        }
    }
    const Thumbnail = ({arr, image, index})=>{
        return(
            <div className='thumbnail'>
                {
                    arr.map((imgsrc,i)=>{
                        return <img 
                        key={i}
                        height="70"
                        width="70"
                        src={imgsrc}
                        onClick={()=> image(i)}
                        className={index === i ? 'active':''}
                        style={{margin:'2px'}}
                        />
                    })
                }
            </div>
        )

    }
  return (
    <>
    <div className='container'>
        <div className='row'>
            <div className='wrapper'>
            <img src={imgs[index]} style={{height:'280px',width:'100%',position:'relative'}}/>
            <button onClick={prev} className="leftBtn"><FaArrowLeft/></button>
            <button onClick={next} className="nextBtn"><FaArrowRight/></button>
            <Thumbnail arr={imgs} image={setIndex} index={index}/><br/>
            </div>
            </div>
        </div>
    </>
  )
}
.thumbnail .active{
border:2px solid rgb(43, 185, 233);
}
.wrapper{
    position: relative;
    min-height: 300px;
    height: auto;
    width:500px;
    padding: 0;
}
.leftBtn{
    height: 40px;
    width:40px;
    border-radius: 50%;
    background-color: rgba(253, 251, 251, 0.3);
    border:1px solid rgb(43, 185, 233);
    color:rgb(43, 185, 233);
    position: absolute;
    top:100px;
    left:10px;
}
.nextBtn{
    height: 40px;
    width:40px;
    border-radius: 50%;
    background-color: rgba(253, 251, 251, 0.3);
    border:1px solid rgb(43, 185, 233);
    color:rgb(43, 185, 233);
    position: absolute;
    top:100px;
    right:10px;
}

export default Slider