JSFiddle - React, Tailwind, and code Playground

HTML

<div id="slider" class="slider_wrap">
<span class="next"></span>
        <img src="http://hostingfortraineeship.esy.es/SliderJava4/slider_image2.jpg" alt="2" />

        <img src="http://hostingfortraineeship.esy.es/SliderJava4/slider_image3.jpg" alt="3" />

        <img src="http://hostingfortraineeship.esy.es/SliderJava4/slider_image1.jpg" alt="1" />
	<img src="http://hostingfortraineeship.esy.es/SliderJava4/slider_image4.jpg" alt="4" />
	<img src="http://hostingfortraineeship.esy.es/SliderJava4/slider_image5.jpg" alt="5" />	
	<img src="http://hostingfortraineeship.esy.es/SliderJava4/slider_image6.jpg" alt="6" />
	<img src="http://hostingfortraineeship.esy.es/SliderJava4/slider_image7.jpg" alt="7" />
	<img src="http://hostingfortraineeship.esy.es/SliderJava4/slider_image8.jpg" alt="8" />
	<img src="http://hostingfortraineeship.esy.es/SliderJava4/slider_image9.jpg" alt="9" />
	<img src="http://hostingfortraineeship.esy.es/SliderJava4/slider_image10.jpg" alt="10" />
<span class="prev"></span>
    </div>

<div class="radio">
    <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>
</div>
<div>Осталось: <span id="timer_inp">5</span> сек.</div>
<input class="stop" type="button" value="Прекратить Отсчет!"  />

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,abbr,acronum{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:''}
    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/SliderJava4/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}
    .radio ul {display: inline-block;
  margin-left: 50%;
  margin-top: 10px;}
    .radio ul li {display: inline-block;}

JavaScript

var MyTimer; 
    var Tstop = $('.stop');
    var stopTimer;
    $(document).ready(function() { 
    MyTimer = setTimeout(timer,1000);
    stopTimer = setTimeout(stopTimer, 1000);   
    });

    function timer()
    {
    var obj=document.getElementById('timer_inp');
    obj.innerHTML--;
        if (obj.innerHTML==0){
            timer_inp.innerHTML=5;
                   } 
     MyTimer = setTimeout(timer,1000);
    }
    Tstop.click(function stopTimer(){
     clearTimeout(MyTimer); 
    });
    var btnNext = $('span.next');
    var btnPrev = $('span.prev');
    btnNext.click(function() {
        Slider.nextslide();
        });
    btnPrev.click(function() {
        Slider.prevslide();
    });
var Slider = {
       elWrap : $('#slider'),
       el : elWrap.find('img'),
       indexImg = 1,
   	   next : el.eq(indexImg-1); 
       indexMax : el.length,
       radios : $('#rad'),
        
        change : function(){
  	if (document.getElementsByName('rad')[0].checked == true)
    {
        
     	el.not(next).animate({"left": v ? -640 : 640 ,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);
        next.appendTo(elWrap).css({left: v ? 620 : -620}).animate({"left": 20}, 800);
    }
    else
    {
        el.stop(true,true);
el.not(next.animate({opacity: 1}, 800)).animate({opacity: 0},800);
    }
}
        
};

    Slider.autoChange = function(){
        indexImg++;
        if(indexImg > indexMax) {
        indexImg = 1;
        }
      Slider.change(true);
};

Slider.nextslide = function() {
    indexImg++;
    if (indexImg == indexMax) {
    indexImg = 1;
    }
    Slider.change(true);
  };

Slider.prevslide = function() {
    indexImg--;
    if (indexImg == 1) {
    indexImg = indexMax;
    }
    Slider.change();
};