JSFiddle - React, Tailwind, and code Playground

HTML

<div id="slider" class="slider_wrap">

        <img src="http://hostingfortraineeship.esy.es/Java4/slider_image2.jpg" alt="2" />

        <img src="http://hostingfortraineeship.esy.es/Java4/slider_image3.jpg" alt="3" />
<img src="http://hostingfortraineeship.esy.es/Java4/slider_image2.jpg" alt="3" />
        <img src="http://hostingfortraineeship.esy.es/Java4/slider_image1.jpg" alt="3" />
        <img src="http://hostingfortraineeship.esy.es/Java4/slider_image1.jpg" alt="3" />
	</div>

<ul>
<li><input type="radio"  class="example" name="rad"></li>
<li><input type="radio"  class="example" name="rad" ></li>
<li><input type="radio"  class="example" name="rad" ></li>
</ul>

CSS

body, div, dl, dt,dd, ul,ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, hr, td {
margin:0; padding:0;
}
table {
	border-collapse:collapse; border-spacing:0;
}
fieldset, img {
	border:0;
}
address, caption, cite, code, dfn, em, strong, th, var {
	font-style:normal; font-weight:normal;
}
ol, ul {
	list-style:none;
}
caption, th {
	text-align:left;
}
h1, h2, h3, h4, h5, h6 {
	font-size:100%; font-weight:normal;
}
q:before, q:after {
	content:'';
}
abbr, acronum {
	border:0;
}


html, body {
	height:100%;
	font:normal 12px/18px Arial, san-serif;
}
.slider_wrap {
margin:100px auto 0;
width:680px;
height:400px;
position:relative;
overflow:hidden;
}
.slider_wrap img {
opacity: 0;
width:640px;
height:auto;
display:block;
position:absolute;
top:0;
left:-640px;
}
.slider_wrap img:first-child {
left: 20px;
opacity: 1;
}
.slider_wrap span {
margin-top:-13px;
width:15px;
height:26px;
display:block;
position:absolute;
top:50%;
cursor:pointer;
background:url(http://hostingfortraineeship.esy.es/Java4/slider2_arrow.png) no-repeat;

}
.slider_wrap span.next {
right:0;
background-position:-15px 0;
}
.slider_wrap span.next:hover {
background-position:-15px -26px;
}
.slider_wrap span.prev {
left:0;
background-position: 0 0;
}
.slider_wrap span.prev:hover {
background-position: 0 -26px;
}

JavaScript

$('input.example').on('change', function() {
    $('input.example').not(this).prop('checked', false);  
});

$(function () {
	var elWrap = $('#slider'),
		el =  elWrap.find('img'),
		indexImg = 1,
		indexMax = el.length,
		phase = 2000,
        	timer;
var radios = $('#rad');
	
function change(v) 
{
  	if (document.getElementsByName('rad')[0].checked == true) 
    { 
	
	el.stop(true,true);
        var next = el.eq(indexImg-1);
     	el.not(next).animate({"left": v ? -680 : 680 ,opacity: 1},800);
        next.css({left: v ? 620 : -620}).animate({"left": 20, opacity: 1}, 800)
    }
    else if(document.getElementsByName('rad')[1].checked == true) 
    {
        el.stop(true,true);
        var next = el.eq(indexImg-1);
        next.appendTo(elWrap).css({left: v ? 620 : -620}).animate({"left": 20}, 800)
    }
    else
    {
        el.stop(true,true);
        var next = el.eq(indexImg-1);
el.not(next.animate({opacity: 1}, 800)).animate({opacity: 0},800);
    } 
}
	
	elWrap.append('<span class="next"></span><span class="prev"></span>');
	var	btnNext = $('span.next'),
		btnPrev = $('span.prev');

	btnNext.click(function() {
        window.clearTimeout(timer)
		indexImg++;
		if(indexImg == indexMax) {
            
           btnNext.hide();
			//indexImg = 1;
		}
		change (true);
btnPrev.show();
		
	});
	btnPrev.click(function() {
        window.clearTimeout(timer)
		indexImg--;
		if(indexImg == 1) 
        {
           btnPrev.hide();
           
			//indexImg = indexMax;
		}

		change();
		btnNext.show();
		
	});


	});