<body bgcolor="#ccc" style="margin: 20px 0;">
<center>

<span tabindex="0"></span>
<span tabindex="0"></span>
<span tabindex="0"></span>
<span tabindex="0"></span>

<p></p>

<div class="slider"></div>

</center>
</body>
* {outline: none;}

.slider {display: block; width: 640px; height: 480px; background: url('http://i050.radikal.ru/1307/39/060605cb3962.jpg') repeat-x; background-color: #fff; border-radius: 10px; box-shadow: 0 5px 30px rgba(0,0,0,.4);background-position: 0% 0%; overflow: hidden; -webkit-transition: background .4s ease;transition: background .4s ease} 

span:nth-child(1):focus ~ .slider { background-position: 0% 0%; color: red;}
span:nth-child(2):focus ~ .slider { background-position: 33.35% 0%; color: red;}
span:nth-child(3):focus ~ .slider { background-position: 66.65% 0%; color: red;}
span:nth-child(4):focus ~ .slider { background-position: 100% 0%; color: red;}

span {background: #fff; width: 20px; height: 20px; padding: 0px 10px 0px 10px; border-radius: 90px; cursor: pointer; margin: 10px; box-shadow: 0 2px 5px rgba(0,0,0,.4); -webkit-transition: background .2s ease;transition: background .2s ease; border: 3px solid rgba(0,0,0,.4)}
span:hover {background: #ddd; }
span:active {background: #333; }
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.