Огромное спасибо... Очень интересные идеи. Все таки на js мне больше нравится, теперь буду думать как привязать это ко времени, чтобы например если идет таймер минута то он корректно отображал эти слайды.... также с часом с днем и тп...
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body{
background-color: #F6F6F6;
}
.slider {
background-image: url(http://preview.ibb.co/dTjrsc/7c7008d0eaa571641b1eb3b2af2a6098.png);
width: 138px;
height: 270px;
background-size: 600px 370px;
background-repeat: no-repeat;
background-position: 0px -50px;
margin: 20px auto;
}
</style>
</head>
<body>
<div class="slider"></div>
<script>
var n = 0;
(function t() {
document.querySelector('.slider').style.backgroundPositionX = ((++n%4)* -154)+"px";
window.setTimeout(t,1000)
}());
</script>
</body>
</html>