0nline,
<html>
<head>
<style type="text/css">
div.slider {top: 100px;
left: 100px}
div.i {position: fixed;
display: block;
width: 80%;
margin: 5% 10% 0 10%;
height: 30%}
div.i img {width: 100%;
height: 100%}
div.description {color: white;
bottom: 0;
width: 100%;
background: rgb(0,0,0);
height: 30%;}
div.decription p{margin: 10px}
div.prev {position: fixed;
left: 7%;
top: 25%}
div.next {position: fixed;
right: 7%;
top: 25%}
</style>
<script>
var i = 11;
var id, el;
function viewdiv(a)
{
id = 'd'+i;
el = document.getElementById(id);
el.style.zIndex="1";
i += a=="pr" ? 1 : -1;
i==12 && (i = 0);
i==-1 && (i = 11);
id = 'd'+i;
el = document.getElementById(id);
el.style.zIndex="2";
}
</script>
</head>
<body>
<div class="prev"><a href="#" id="pr" onclick="viewdiv(this.id);return false">Back</a></div>
<div>
<div class="i" id="d0"><img src="1.jpg"><div class="description">1</div></div>
<div class="i" id="d1"><img src="2.jpg"><div class="description">2</div></div>
<div class="i" id="d2"><img src="3.jpg"><div class="description">3</div></div>
<div class="i" id="d3"><img src="4.jpg"><div class="description">4</div></div>
<div class="i" id="d4"><img src="5.jpg"><div class="description">5</div></div>
<div class="i" id="d5"><img src="6.jpg"><div class="description">6</div></div>
<div class="i" id="d6"><img src="7.jpg"><div class="description">7</div></div>
<div class="i" id="d7"><img src="8.jpg"><div class="description">8</div></div>
<div class="i" id="d8"><img src="9.jpg"><div class="description">9</div></div>
<div class="i" id="d9"><img src="10.jpg"><div class="description">10</div></div>
<div class="i" id="d10"><img src="11.jpeg"><div class="description">11</div></div>
<div class="i" id="d11"><img src="12.jpg"><div class="description">12</div></div>
</div>
<div class="next"><a href="#" id="ne" onclick="viewdiv(this.id); return false">Next</a></div>
</body>
</html>