JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<div id="lopredsaxezam" class="lopredsaxezam">
 <div id="zornetirusten" class="zornetirusten">
    <section class="tugaringasen"><img src="http://welltechnically.com/wp-content/uploads/2013/08/android-wallpapers-700x300.jpg" class="kartinsan-gukas"></section>
    <section class="tugaringasen"><img src="http://zornet.ru/_ld/87/06468016.jpg" class="kartinsan-gukas"></section>
    <section class="tugaringasen"><img src="http://welltechnically.com/wp-content/uploads/2013/09/android-widescreen-wallpaper-14165-hd-wallpapers-700x300.jpg" class="kartinsan-gukas"></section>
    <section class="tugaringasen"><img src="http://youghaltennisclub.ie/wp-content/uploads/2014/06/Tennis-Wallpaper-High-Definition-700x300.jpg" class="kartinsan-gukas"></section>
  </div>
  <div id="bumilanges-teqazenkin" class="bumilanges-teqazenkin">&#60;</div>
  <div id="bumilanges-polsanumas" class="bumilanges-polsanumas">&#62;</div>
 </div>

CSS

* {
  box-sizing: border-box;
}

body {
  display: flex;
  min-height: 100vh;
  background: #EFC076;
}

.lopredsaxezam {
  margin: auto;
  width: 53%;
  max-width: 900px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 0 10px #fff,
 0 15px 50px;
}

.zornetirusten {
  display: flex;
  width: 400%;
}

.tugaringasen {
  width: 100%;
}

.kartinsan-gukas {
  display: block;
  width: 100%;
  height: 100%;
}

.bumilanges-teqazenkin, .bumilanges-polsanumas {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.7);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  line-height: 40px;
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  border-radius: 50%;
  font-family: monospace;
  cursor: pointer;
}

.bumilanges-teqazenkin:hover, .bumilanges-polsanumas:hover {
  background: white;
}

.bumilanges-teqazenkin {
  left: 10px;
}

.bumilanges-polsanumas {
  right: 10px;
}

JavaScript

var slider = $('#zornetirusten');
var siguiente = $('#bumilanges-polsanumas');
var anterior = $('#bumilanges-teqazenkin');

$('#zornetirusten .tugaringasen:last').insertBefore('#zornetirusten .tugaringasen:first');

slider.css('margin-left', '-'+100+'%');

function moverD() {
	slider.animate({
		marginLeft:'-'+200+'%'
	} ,700, function(){
		$('#zornetirusten .tugaringasen:first').insertAfter('#zornetirusten .tugaringasen:last');
		slider.css('margin-left', '-'+100+'%');
	});
}

function moverI() {
	slider.animate({
		marginLeft:0
	} ,700, function(){
		$('#zornetirusten .tugaringasen:last').insertBefore('#zornetirusten .tugaringasen:first');
		slider.css('margin-left', '-'+100+'%');
	});
}

function autoplay() {
	interval = setInterval(function(){
		moverD();
	}, 5000);
}
siguiente.on('click',function() {
	moverD();
	clearInterval(interval);
	autoplay();
});

anterior.on('click',function() {
	moverI();
	clearInterval(interval);
	autoplay();
});
autoplay();