JSFiddle - React, Tailwind, and code Playground

HTML

<div id="slider" class="slider_wrap">
<img src="http://hostingfortraineeship.esy.es/java4/slider_image1.jpg" alt="" />

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

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

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

$(function () {
	var elWrap = $('#slider'),
		el =  elWrap.find('img'),
		indexImg = 1,
		indexMax = el.length,
		phase = 100000,
                timer;
    function change(v) {
        var next = el.eq(indexImg-1);
next.css({left: v ? 620 : -620}).animate({"left": 20, opacity: 1}, 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) {

			indexImg = 1;
		}
		change (true);
	});
	btnPrev.click(function() {
        window.clearTimeout(timer)
		indexImg--;
		if(indexImg < 1) {
			indexImg = indexMax;
		}

		change();
	});
   autoCange()
	});