in this guide we are going to create image slider which contain 5 4 images in slide.

1) create react app 2) create a component for slideshow and import css file if any needed

i have created 3 files

• smartPhone.js (contain main logic)
• smartPhone.css (contain css style)
• smartPhoneData.js (contain data which i am importing to display)

1. in smartPhone.js create state for current image with default value 1

   const [currentPhone, setCurrentPhone] = useState(1);
   

2. our requirement is to create slideshow with 4 image at a time so we will create 2 more veriables which will chage its value based on current state a)

   const firstImg = currentPhone - 1; //will display previous image (index 0)
   const lastImg = currentPhone + 2; //will display next 2 image (index 3,4)
   

   b) we will create a variable containing length of array of data

   const smartArrLength = smartPhoneData.length;
   

c). next we will create two function which onclick will next and previous image

const nextImage = () => {
// if value of  lastImg is equal to length of data array reset state to 1 again
//or display next image
    setCurrentPhone(lastImg === smartArrLength - 1 ? 1 : currentPhone + 1);
  };

  const prevImage = () => {
// if value of  firstImg equal to 0 set state to  last 3 image 
//or show previous one image
    setCurrentPhone(firstImg === 0 ? smartArrLength - 3 : currentPhone - 1);
  };

d) by using map show only data which is equal to or more than firstImg or equal to or less than lastImg

<div className="smartPhonesSlider">
          {smartPhoneData.map((v, i) => {
            if (i >= firstImg && i <= lastImg) {
              return (
                <div className="simpleSmartPhone" key={v.id}>
                  <div>
                    <img
                      src={v.phonePhoneUrl}
                      alt={`phone  ${v.fullDetailLinkAndTitle}`}
                    />
                  </div>
                  <p> {v.fullDetailLinkAndTitle}</p>
                  <p>&#8377; {v.prise}</p>
                </div>
              );
            }
          })}
        </div>

---

complete code :

import React, { useState } from "react";
import smartPhoneData from "./smartPhoneData";
import "./smartPhones.css";
import { faAngleLeft, faAngleRight } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
// className={`${style.before_login_element}`}

function SmartPhones() {

  const [currentPhone, setCurrentPhone] = useState(1);
  const firstImg = currentPhone - 1;
  const lastImg = currentPhone + 2;
  const smartArrLength = smartPhoneData.length;
  console.log({ currentPhone }, { firstImg }, { lastImg }, { smartArrLength });

  const nextImage = () => {
    setCurrentPhone(lastImg === smartArrLength - 1 ? 1 : currentPhone + 1);
  };

  const prevImage = () => {
    setCurrentPhone(firstImg === 0 ? smartArrLength - 3 : currentPhone - 1);
  };

  return (
    <div>
      <div className="smartPhoneHeading">
        <h2>Smartphones</h2>
      </div>
      <div className="smartPhoneBody">
        <div className="smartPhonesIcon">
          <FontAwesomeIcon
            icon={faAngleLeft}
            color="black"
            onClick={prevImage}
          />
        </div>
        <div className="smartPhonesSlider">
          {smartPhoneData.map((v, i) => {
            if (i >= firstImg && i <= lastImg) {
              return (
                <div className="simpleSmartPhone" key={v.id}>
                  <div>
                    <img
                      src={v.phonePhoneUrl}
                      alt={`phone  ${v.fullDetailLinkAndTitle}`}
                    />
                  </div>
                  <p> {v.fullDetailLinkAndTitle}</p>
                  <p>&#8377; {v.prise}</p>
                </div>
              );
            }
          })}
        </div>
        <div className="smartPhonesIcon">
          <FontAwesomeIcon
            icon={faAngleRight}
            color="black"
            onClick={nextImage}
          />
        </div>
      </div>
    </div>
  );
}

export default SmartPhones;

Hit like if it add any value for you

#reactjs #react