shoopik,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#slider {
position: relative;
}
#polosa{
position: absolute;
}
</style>
</head>
<body> <button id="slider-left">left</button>
<button id="slider-right">right</button>
<div id="slider">
<div id="polosa">
<img src="https://cdn0.iconfinder.com/data/icons/superhero-2/256/Spiderman-128.png" alt="">
<img src="https://cdn0.iconfinder.com/data/icons/superhero-2/256/Robin-128.png" alt="">
<img src="https://cdn0.iconfinder.com/data/icons/superhero-2/256/Captain_America-128.png" alt="">
<img src="https://cdn4.iconfinder.com/data/icons/superhero/128/thepunisher.png" alt="">
<img src="https://cdn0.iconfinder.com/data/icons/IS_hallowen_social/128/su_superman.png" alt="">
</div>
</div>
<script>document.getElementById('slider-left').onclick = sliderLeft;
var left = 0;
function sliderLeft () {
var poloska = document.getElementById('polosa');
left = left - 128;
if (left < -512) {
left = 0;
}
polosa.style.left= left+'px';
};
document.getElementById('slider-right').onclick = sliderRight;
function sliderRight () {
var poloska = document.getElementById('polosa');
left = left + 128;
if (left > 0) {
left = -512;
}
polosa.style.left = left+'px';
};</script>
</body>
</html>