JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<input checked type="radio" name="slider" id="switch1">
<input type="radio" name="slider" id="switch2">
<input type="radio" name="slider" id="switch3">
<input type="radio" name="slider" id="switch4">
<input type="radio" name="slider" id="switch5">
<div id="slider" class="noga">
</div>
</body>
CSS
.noga{
width: 50px;
height: 50px;
background-color: red;
}
JavaScript
var a = document.getElementById("switch1");
var b = document.getElementById("switch2");
var c = document.getElementById("switch3");
var d = document.getElementById("switch4");
var e = document.getElementById("switch5");
var element = document.getElementById("slider");
element.onclick = function (){
setInterval(function(){
if(a.getAttribute("checked") !== null){
b.setAttribute("checked", "checked");
}else if(b.getAttribute("checked") !== null){
c.setAttribute("checked", "checked");
}else if(c.getAttribute("checked") !== null){
d.setAttribute("checked", "checked");
}else if(d.getAttribute("checked") !== null){
e.setAttribute("checked", "checked");
}else if(e.getAttribute("checked") !== null){
a.setAttribute("checked", "checked");
}
}, 2000);
}