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.
Source: stackoverflow.com
Related Query
- How to make cards slide in React using buttons?
- How to make a counter using React Hooks which depends on two buttons start and stop?
- How to make my modal slide down in React using keyframes
- How to make the whole Card component clickable in Material UI using React JS?
- How to make sure a React state using useState() hook has been updated?
- How do I make components in React Native without using JSX?
- How to make a React component fade in on scroll using IntersectionObserver, but only once?
- React Native: How to make format card expiration with / using <TextInput/>?
- How do I make my React Bootstrap cards line up horizontally and equally spaced (also responsively if possible)
- How to make the API call and display it in React JS using React Table and Axios?
- How to change the Swiper height or slide width in React JS without using fixed CSS
- How to properly make a GET call in React returning an observable (resembling the method in Angular and not using promises)?
- How to make a post request using react redux?
- When using React Query how do I make sure data is normalized across queries of a dataset?
- How to make a transition when using conditional rendering in React
- How to make a loop request with React using Axios?
- How to make a list from json object using React
- How do I make this custom generated table editable? Made it using Ag-grid react
- How can I make a background image repeat using React gatsby-background-image?
- How to make only one API request when using React SSR?
- how to make a vertical slide of text in React
- How can i make a simple counter in React without using state
- How to get one elements to slide in while the other slides out, using react and material-ui?
- How to make search in select box using React JS?
- how to make animation for div in react using react-spring when hiding?
- When using aws amplify on react to make an call to api gateway, how do i go about getting the statuscode as well?
- How to make the filters work in this todo app created using react and redux?
- how to make input disabled in react using bootstrap?
- How to detect if String contains url and make url clickable using javascript react js
- How to make different styles using makeStyles in React JS Material-UI?
More Query from same tag
- Duplicate the input in the form React
- How can I customize the color of a Checkbox in MUI?
- How to mock a method which is part of a node-module using jest?
- React - Handle modification of cell inside state's array
- findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of DraggableCore which is inside StrictMode
- Netlify 404 on form submission with Gatsby
- Flask, pass dataframe as a JSON to the client in order to display it
- TypeError: Cannot read property 'map' of undefined, Is passing an array as a prop to a functional component not possible?
- When and what part of the state is supposed to be deep cloned in Redux reducer?
- Ionic React props.match.params doesn't update
- Cannot set setstate in reactJS
- Processing an Object During Fetch Returns 'undefined'
- How to use Axios from backend to frontend
- JSX select element does not seem to auto-select (implement 'selected') on option. Am I missing something?
- How would I redirect existing pathname followed by non-existing pathname to pathname?
- How to disable the return button without clearing the URL current address
- How can I get step by step data from api in redux/react by infinite scroll
- How can I make my Single Page Application (SPA) based on React render conditionally?
- React with Redux: error on propType property
- Trying to make a reuseable DataGrid component with my own defaults from ReactDataGrid, but Typescript giving me errors
- Disable paste in Formik Field
- How to change local state without changing global state
- React.js - How do I pass data from a div to a function with axios POST method?
- How to make div component go over on top of any other component (h1 or p)
- alternative to call dispatch from a exported function
- how to enable top level await in reactjs
- How process data send from a .findAll(include: {all: true}) of sequelize
- ANTD Dropdown should not close when clicked on the Input field
- React inline style - style prop expects a mapping from style properties to values, not a string
- How to set initial value of Animate presence of Framer Motion to false in mobile view in React using hooks