Create Image Slider in ReactJS

Hey there,
I am creating an Image Slider in ReactJS and CSS. It is easy to make. So don't waste time in reading and let's create some cool stuff.

KEY POINTS

• Some images to show in Slider & these images are stored in an Array
• A Counter that can change the index of the array (Increment / Decrement)
• Two buttons - One for the next image & another one for the previous image
• Some Styling (I'm using FONTAWESOME)

---

ImageSlider.js

Create ImageSlider.js file in your src folder

import { useState } from "react";

function ImageSlider(){
    let arr_of_imgs = ["https://images.unsplash.com/photo-1527049979667-990f1d0d8e7f?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=900&ixid=MnwxfDB8MXxyYW5kb218MHx8YmFja2dyb3VuZHx8fHx8fDE3MDExOTIwMDE&ixlib=rb-4.0.3&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=1600","https://images.unsplash.com/photo-1483232539664-d89822fb5d3e?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=900&ixid=MnwxfDB8MXxyYW5kb218MHx8YmFja2dyb3VuZHx8fHx8fDE3MDExOTIwMTA&ixlib=rb-4.0.3&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=1600","https://images.unsplash.com/photo-1541450805268-4822a3a774ca?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=900&ixid=MnwxfDB8MXxyYW5kb218MHx8YmFja2dyb3VuZHx8fHx8fDE3MDExOTIwMjA&ixlib=rb-4.0.3&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=1600","https://images.unsplash.com/photo-1542461927-dd68c85adc56?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=900&ixid=MnwxfDB8MXxyYW5kb218MHx8YmFja2dyb3VuZHx8fHx8fDE3MDExOTQ4NDg&ixlib=rb-4.0.3&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=1600","https://images.unsplash.com/photo-1644258063048-115a8d344aa6?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=900&ixid=MnwxfDB8MXxyYW5kb218MHx8c3BlY2llc3x8fHx8fDE3MDExOTQ5Mjk&ixlib=rb-4.0.3&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=1600","https://images.unsplash.com/photo-1428908728789-d2de25dbd4e2?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=900&ixid=MnwxfDB8MXxyYW5kb218MHx8YmFja2dyb3VuZHx8fHx8fDE3MDExOTQ5Mzg&ixlib=rb-4.0.3&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=1600","https://images.unsplash.com/photo-1593029098077-ee36a677007c?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=900&ixid=MnwxfDB8MXxyYW5kb218MHx8U3BpY2VzfHx8fHx8MTcwMTE5NTAwMQ&ixlib=rb-4.0.3&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=1600"];

    let [counter, setCounter] = useState(0);

    function preImage(){
        if(counter>0){
            setCounter(--counter);
        }else{
            setCounter(arr_of_imgs.length-1);
        }

    }

    function nextImage(){

        if(counter<(arr_of_imgs.length-1)){
            setCounter(++counter);
        }else{
            setCounter(0);
        }
    }

    const imgStyle = {
        transform: "translateX(280px) translateY(100px)",
        border:"5px solid #fff",
        boxShadow: "2px 2px 20px 2px black"
    }
    const arrowIcon = {
        fontSize: "25px"
    }
    return <div>
        <button onClick={preImage} style={{position:"absolute",top:"42%",left:"5%",width:"100px",height:"100px",borderRadius:"50%",border:"5px solid grey"}}>
            <i class="fa-solid fa-arrow-left" style={arrowIcon}></i>
        </button>

        <img src={arr_of_imgs[counter]} width={900} style={imgStyle}/>

        <button style={{position:"absolute",top:"42%",left:"90%", width:"100px",height:"100px",borderRadius:"50%",border:"5px solid grey"}} onClick={nextImage}>
            <i class="fa-solid fa-arrow-right" style={arrowIcon}></i>
        </button>
    </div>

}

export default ImageSlider;

App.js

Import ImageSlider in App.js and start the server.

import ImageSlider from './ImageSlider';

function App() {
  return (
    <div>
      <header>
        <ImageSlider/>
      </header>
    </div>
  );
}

export default App;