virgoprima,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Slider</title>
<style type="text/css">html{font-size:10px}
body{padding:10px}
.slider{position:relative;width:1000px;height:550px;background:#aed;padding-top:50px}
.img{width:800px;overflow:hidden;margin:auto;background:#F00}
.slider img{width:640px;height:480px;display:block;opacity:0.6}
.img ul{height:480px;width:9999px;list-style:none;transition:left 500ms;font-size:0;position:relative}
.img li{display:inline-block;margin-right:40px}
.arrow{position:absolute;top:500px;padding:0;background:#ddd;border-radius:15px;border:1px solid gray;font-size:24px;line-height:24px;color:#444;display:block}
.arrow:focus{outline:none}
.arrow:hover{background:#ccc;cursor:pointer}
.prev{left:25px}
.next{right:25px}
.img ul{transition:all 1s ease-in-out}
</style>
</head>
<body>
<div id="slider" class="slider">
<button class="arrow prev">⇦</button>
<div class="img">
<ul>
<li id="img1"><img src="http://lorempixel.com/image_output/nature-q-c-640-480-4.jpg" alt="природа"></li>
<li id="img2"><img src="http://lorempixel.com/image_output/nature-q-c-640-480-5.jpg" alt="природа"></li>
<li id="img3"><img src="http://lorempixel.com/image_output/nature-q-c-640-480-7.jpg" alt="природа"></li>
<li id="img4"><img src="http://lorempixel.com/image_output/nature-q-c-640-480-8.jpg" alt="природа"></li>
<li id="img5"><img src="http://lorempixel.com/image_output/nature-q-c-640-480-3.jpg" alt="природа"></li>
</ul>
</div>
<button class="arrow next">⇨</button>
</div>
<script>
var slider = document.getElementById("slider");
var list = slider.querySelector("ul");
var listElems = slider.querySelectorAll("li");
var position = 0;
function move(position) {
var sum = 0;
for (var i = 0; i < position; i++) sum += i ? 680 : 640;
list.style.marginLeft = -sum + "px"
}
slider.querySelector(".prev").onclick = function() {
position = ++position % listElems.length;
move(position)
};
slider.querySelector(".next").onclick = function() {
--position;
position < 0 && (position = listElems.length - 1);
move(position)
};
</script>
</body>
</html>