change/shift down class names on div for every 3 seconds on React

Question

i want to move down the css classes one by one, for example if the image is the starting point after 3 seconds all the classes should shift down and last class should be at the top so it will move the images on the carousel, i hope it will make sense, any help will be highly appreciated!

  <div>
    <div class="nextRightSecond"> </div>
    <div class="hideRight"> </div>
    <div class="hideLeft"> </div>
    <div class="prevLeftSecond"> </div>
    <div class="prev"> </div>
    <div class="selected"> </div>
    <div class="next"> </div>
  <div>

see the mobile carousel in this live example https://twcinnovations.com/services/mobile-applications

EDIT:this is my starter code would look like

import {BsArrowLeftCircle, BsArrowRightCircle} from 'react-icons/bs'
import { useEffect, useState } from "react


const ImageSlider = () => {
 
  return (
    <Section outerCustomClass="mb-20 mt-10">
      <div className="flex flex-col items-center gap-y-4 ">
        {/* images */}

        <div className="w-full h-fit">

          <div className="relative overflow-hidden w-full">

            <div className={`absolute top-1/2 -translate-y-1/2 w-40 md:w-44 xl:w-48 2xl:w-72 `}>
              <img className="rounded h-96 w-80 object-contain" src="/images/common/slider/1.jpg" alt="" />
            </div>

            <div className={`absolute top-1/2 -translate-y-1/2 w-40 md:w-44 xl:w-48 2xl:w-72 `}>
              <img className="rounded h-96 w-80 object-contain" src="/images/common/slider/2.jpg" alt="" />
            </div>

            <div className={`absolute top-1/2 -translate-y-1/2 w-40 md:w-44 xl:w-48 2xl:w-72`}>
              <img className="rounded h-96 w-80 object-contain" src="/images/common/slider/3.jpg" alt="" />
            </div>

            <div className={`absolute top-1/2 -translate-y-1/2 w-40 md:w-44 xl:w-48 2xl:w-72 `}>
              <img className="rounded h-96 w-80 object-contain" src="/images/common/slider/4.jpg" alt="" />
            </div>

            <div className={`absolute top-1/2 -translate-y-1/2 w-40 md:w-44 xl:w-48 2xl:w-72 `}>
              <img className="rounded h-96 w-80 object-contain" src="/images/common/slider/5.jpg" alt="" />
            </div>

            <div className={`absolute top-1/2 -translate-y-1/2 w-40 md:w-44 xl:w-48 2xl:w-72 `}>
              <img className="rounded h-96 w-80 object-contain" src="/images/common/slider/6.jpg" alt="" />
            </div>

            <div className={`absolute top-1/2 -translate-y-1/2 w-40 md:w-44 xl:w-48 2xl:w-72 `}>
              <img className="rounded h-96 w-80 object-contain" src="/images/common/slider/7.jpg" alt="" />
            </div>

          </div>
        </div>

        <div className="text-sea-base flex gap-x-4 w-20 md:w-40 cursor-pointer">
          <BsArrowLeftCircle size={50} />
          <BsArrowRightCircle size={50} />
        </div>

Answer 1

i was going to create a mobile responsive image slider like this without any npm packages or dependencies.

Follow these steps below and carefully refer the code below as well

1. create an object that can store tailwind classes(or css class names) for each of these images. i have created 7 styles because both first img from left and right side images are hidden in order to make a infinite slider.

2. at the top i defined a sliderIndex variable which has a initial value of 0, for every 3000 seconds we increase it value by 1 (that's same as pressing the next button for every 3000 seconds), using setInterval js function

3. when the sliderIndex value changes each image get different styles from the classes object, ( see this property on each image ${styleValues[(sliderIndex + 0) % styleValues.length] ) on first iteration it will be like 0,1,2,3,4,5,6 on next iteration it will start from 1,2,3,4,5,6,0 on the next it will be 2,3,4,5,6,1,2 so each images that get these classes place them self according to the styles which we gave using styles object.

That's all you have to do to make a slider without any packages?, i used left,right css properties to move the images and then only figured out about transform property is more suitable for this task so you can use it if you want better performance.

import {BsArrowLeftCircle, BsArrowRightCircle} from 'react-icons/bs'
import { useEffect, useState } from "react


const ImageSlider = () => {
  const [sliderIndex, setSliderIndex] = useState(0)

  const classes = {
    hideLeft: "opacity-0 -left-1/4 ",
    first:    "opacity-0 scale-100 | md:-left-1/4 | lg:left-0 lg:opacity-100",
    prev:     "-translate-x-full opacity-0 scale-100 | md:left-0 md:opacity-100 md:-translate-x-0 | lg:opacity-100 lg:left-1/3 lg:-translate-x-3/4 ",
    selected: "z-20 left-0 md:scale-110 md:left-1/2 md:-translate-x-1/2",
    next:     "z-20 scale-100 left-full -translate-x-full | md:z-10 md:left-full md:-translate-x-full | lg:opacity-100 lg:left-2/3 lg:-translate-x-1/4",
    last:     "scale-100 left-full | lg:opacity-100 lg:-translate-x-full ",
    hideRight:"opacity-0 left-full w-0"
  }

  const styleValues = Object.values(classes)

  const handleNextClick = () => {
    setSliderIndex((prev) => prev + 1)
  }

  const handlePreviousClick = () => {
    setSliderIndex((prev) => prev - 1)
  }

  useEffect(() => {
      const interval = setInterval(() => {
        handleNextClick()
      }, 3000)
      return () => clearInterval(interval)
    },[]
  )

  return (
    <Section outerCustomClass="mb-20 mt-10">
      <div className="flex flex-col items-center gap-y-4 ">
        {/* images */}

        <div className="w-full h-fit">

          <div className="relative overflow-hidden w-full">

            <div className={`absolute top-1/2 -translate-y-1/2 w-40 md:w-44 xl:w-48 2xl:w-72 ${styleValues[(sliderIndex + 0) % styleValues.length]} `}>
              <img className="rounded h-96 w-80 object-contain" src="/images/common/slider/1.jpg" alt="" />
            </div>

            <div className={`absolute top-1/2 -translate-y-1/2 w-40 md:w-44 xl:w-48 2xl:w-72 ${styleValues[(sliderIndex + 1) % styleValues.length]} `}>
              <img className="rounded h-96 w-80 object-contain" src="/images/common/slider/2.jpg" alt="" />
            </div>

            <div className={`absolute top-1/2 -translate-y-1/2 w-40 md:w-44 xl:w-48 2xl:w-72 ${styleValues[(sliderIndex + 2 ) % styleValues.length]}`}>
              <img className="rounded h-96 w-80 object-contain" src="/images/common/slider/3.jpg" alt="" />
            </div>

            <div className={`absolute top-1/2 -translate-y-1/2 w-40 md:w-44 xl:w-48 2xl:w-72 ${styleValues[(sliderIndex + 3) % styleValues.length]}`}>
              <img className="rounded h-96 w-80 object-contain" src="/images/common/slider/4.jpg" alt="" />
            </div>

            <div className={`absolute top-1/2 -translate-y-1/2 w-40 md:w-44 xl:w-48 2xl:w-72 ${styleValues[(sliderIndex + 4) % styleValues.length]}`}>
              <img className="rounded h-96 w-80 object-contain" src="/images/common/slider/5.jpg" alt="" />
            </div>

            <div className={`absolute top-1/2 -translate-y-1/2 w-40 md:w-44 xl:w-48 2xl:w-72 ${styleValues[(sliderIndex + 5) % styleValues.length]}`}>
              <img className="rounded h-96 w-80 object-contain" src="/images/common/slider/6.jpg" alt="" />
            </div>

            <div className={`absolute top-1/2 -translate-y-1/2 w-40 md:w-44 xl:w-48 2xl:w-72 ${styleValues[(sliderIndex + 6) % styleValues.length]} `}>
              <img className="rounded h-96 w-80 object-contain" src="/images/common/slider/7.jpg" alt="" />
            </div>

          </div>
        </div>

        <div className="text-sea-base flex gap-x-4 w-20 md:w-40 cursor-pointer">
          <BsArrowLeftCircle size={50} onClick={handlePreviousClick}  />
          <BsArrowRightCircle size={50} onClick={handleNextClick} />
        </div>