How to make cards slide in React using buttons?

Question

I want buttons to slide different cards on the screen currently it is moving by clicking on cards.

I tried using jquery ComponentDidMount but I'm unable to make it work and I'm stucked here.

this is my code In App class

        <div className="flex flex-wrap sm:-m-4 -mx-4 -mb-10 -mt-4">
          <div className="md:w-1/4 py-64 md:mb-0 mb-6 flex flex-col text-center items-center">
            <div className="w-20 h-20 inline-flex items-center justify-center rounded-full bg-orange-100 text-orange-500 mb-5 flex-shrink-0">
              <img
                id="pre-btn"
                alt="logo"
                className="h-10 pr-0"
                src={back}
                
              ></img>
            </div>
          </div>
          <div className="md:w-2/4 md:mb-0 mb-6 flex flex-col text-center items-center">
            <section
              id="slider"
              className="w-16 h-20 inline-flex items-center justify-center mb-5 flex-shrink-0"
            >
              <input type="radio" name="slider" id="s1" defaultChecked="false"/>
              <input type="radio" name="slider" id="s2" defaultChecked="true"/>
              <input type="radio" name="slider" id="s3" defaultChecked="false"/>
              <label htmlFor="s1" id="slide1">
                {/* <img className="fea" src="./assets/img/img1.jpg" height="100%" width="100%"/> */}
              </label>
              <label htmlFor="s2" id="slide2">
                {/* <img className="fea" src="./assets/img/img2.jpg" height="100%" width="100%"/> */}
              </label>
              <label htmlFor="s3" id="slide3">
                {/* <img className="fea" src="./assets/img/img3.jpg" height="100%" width="100%"/> */}
              </label>
            </section>
          </div>
          <div className="md:w-1/4 py-64 md:mb-0 mb-6 flex flex-col text-center items-center">
            <div className="w-20 h-20 inline-flex items-center justify-center rounded-full bg-orange-100 text-orange-500 mb-5 flex-shrink-0">
              <img
                id="nex-btn"
                alt="logo"
                className="h-10 pr-0"
                src={front}
              ></img>
            </div>
          </div>
        </div>

this is my css part

[type=radio] {
  display: none;
}

#slider {
  height: 30vw;
  width: 40vw;
  margin: 0 auto;
  left: -10%;
  position: relative;
  perspective: 1000px;
  transform-style: preserve-3d;
}

#slider label {
  margin: auto;
  background-color: aliceblue;
  width: 60%;
  height: 100%;
  border-radius: 4px;
  position: absolute;
  left: 0; right: 0;
  cursor: pointer;
  transition: transform 0.4s ease;
}


#s1:checked ~ #slide3, #s2:checked ~ #slide1,
#s3:checked ~ #slide2 {
  box-shadow: 0 6px 10px 0 rgba(0,0,0,.3), 0 2px 2px 0 rgba(0,0,0,.2);
  transform: translate3d(-50%,0,-100px);
}

#s1:checked ~ #slide1, #s2:checked ~ #slide2,
#s3:checked ~ #slide3 {
  box-shadow: 0 13px 25px 0 rgba(0,0,0,.3), 0 11px 7px 0 rgba(0,0,0,.19);
  transform: translate3d(0,0,0);
}

#s1:checked ~ #slide2, #s2:checked ~ #slide3,
#s3:checked ~ #slide1 {
  box-shadow: 0 6px 10px 0 rgba(0,0,0,.3), 0 2px 2px 0 rgba(0,0,0,.2);
  transform: translate3d(50%,0,-100px);
}

this is my jquery code

  componentDidMount() {
var i=Number(2) ;
var dam = "#s" + i ;
$("#pre-btn").click(function(){
  // console.log(dam);

$(dam).prop('defaultChecked', "false") ;
  if(i>1){
    i-- ;
  }
  
$(dam).prop('defaultChecked', "true") ;
}) ;

$("#nex-btn").click(function(){
    $(dam).prop('defaultChecked', "false") ;
    
    if(i<3){
        i++ ;
      }
    
    $(dam).prop('defaultChecked', "true") ;
  }) ;

}

I think that states in react must be used but I don't know how to use that's why I used jquery.

Answer 1

Here is what i can propose you, without jquery (I usually try to avoid it) :

import React, { Component } from "react";
import { render } from "react-dom";
import Hello from "./Hello";
import "./style.css";

const App = () => {
  const [selectedIndex, setSelectedIndex] = React.useState(0);

  const checkNext = () => {
    const labels = document.querySelectorAll('#slider label');
    const nextIndex = selectedIndex === (labels.length - 1) ? 0 : selectedIndex + 1; 
    setSelectedIndex(nextIndex);
  }

  const check = index => setSelectedIndex(index);

    return (
      <div>
        <div className="flex flex-wrap sm:-m-4 -mx-4 -mb-10 -mt-4">
          <div className="md:w-1/4 py-64 md:mb-0 mb-6 flex flex-col text-center items-center">
            <div className="w-20 h-20 inline-flex items-center justify-center rounded-full bg-orange-100 text-orange-500 mb-5 flex-shrink-0">
              <button onClick={checkNext}>{'<'}</button>
            </div>
          </div>
          <div className="md:w-2/4 md:mb-0 mb-6 flex flex-col text-center items-center">
            <section
              id="slider"
              className="w-16 h-20 inline-flex items-center justify-center mb-5 flex-shrink-0"
            >
              <input
                type="radio"
                name="slider"
                id="s1"
                checked={selectedIndex === 0}
                onClick={() => check(0)}
              />
              <input 
                type="radio" 
                name="slider" 
                id="s2" 
                checked={selectedIndex === 1}
                onClick={() => check(1)}
              />
              <input
                type="radio"
                name="slider"
                id="s3"
                checked={selectedIndex === 2}
                onClick={() => check(2)}
              />
              <label htmlFor="s1" id="slide1">
                <img className="fea" src="https://picsum.photos/200/200" height="100%" width="100%"/>
              </label>
              <label htmlFor="s2" id="slide2">
                <img className="fea" src="https://picsum.photos/200/300" height="100%" width="100%"/>
              </label>
              <label htmlFor="s3" id="slide3">
                <img className="fea" src="https://picsum.photos/300/300" height="100%" width="100%"/>
              </label>
            </section>
          </div>
          <div className="md:w-1/4 py-64 md:mb-0 mb-6 flex flex-col text-center items-center">
            <div className="w-20 h-20 inline-flex items-center justify-center rounded-full bg-orange-100 text-orange-500 mb-5 flex-shrink-0">
              <button onClick={checkNext}>{'>'}</button>
            </div>
          </div>
        </div>
      </div>
    );
  }

render(<App />, document.getElementById("root"));

I didn't change your css at all and used it to do the switch, as before. I just created a state containing the index of the checked element, which allow you to defined wether or not an input is checked. When the value changes, it trigger your css and do the switch.

Here is a repro on stackblitz.