score:1

Accepted answer

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.


Related Query

More Query from same tag