<div id="scroller">  
  <div class="nav">  
  <a class="prev">«</a>  
  <a class="next">»</a>  
  </div>  
  <a class="item" href="#"><img src="img/1.jpg" alt=""></a>  
  <a class="item" href="#"><img src="img/2.jpg" alt=""></a>  
  <a class="item" href="#"><img src="img/3.jpg" alt=""></a>  
  <a class="item" href="#"><img src="img/4.jpg" alt=""></a>  
  <a class="item" href="#"><img src="img/5.jpg" alt=""></a>  
  <a class="item" href="#"><img src="img/6.jpg" alt=""></a>  
  <a class="item" href="#"><img src="img/7.jpg" alt=""></a>  
</div>

html, body {  
  height: 100%;  
  margin: 0;  
}  

body {  
  background-color: #939393;  
  background: -webkit-linear-gradient(top, #4D4D4D 0, #4D4D4D 180px, #939393 400px);  
}  

#scroller {  
  width: 500px;  
  height: 200px;  
  margin: 0 auto;  
  padding: 50px 0;  
  -webkit-perspective: 500px;  
  -moz-perspective: 500px;  
}  

#scroller .item {  
  width: 500px;  
  display: block;  
  position: absolute;  
  border-radius: 10px;  
  -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.85, transparent), to(rgba(255,255,255,0.15)));  
  -webkit-transition: all 0.4s ease-in-out;  
  -moz-transition: all 0.4s ease-in-out;  
  z-index: 0;  
}  

/* Since inset shadows don't play nice with images, we'll create a pseudo element and apply our image styling to that instead */  
#scroller .item:before {  
  border-radius: 10px;  
  width: 500px;  
  display: block;  
  content: '';  
  position: absolute;  
  width: 100%;  
  height: 100%;  
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.3), 0 0 0 1px rgba(0,0,0,0.4);  
}  

#scroller .item img {  
  display: block;  
  border-radius: 10px;  
}  

#scroller .left {  
  -webkit-transform: rotateY(25deg) translateX(-320px) skewY(-5deg) scale(0.4, 0.6);  
  -moz-transform: rotateY(25deg) translateX(-320px) skewY(-5deg) scale(0.4, 0.6);  
}  

#scroller .middle {  
  z-index:1;  
  -webkit-transform: rotateY(0deg) translateX(0) scale(1);  
  -moz-transform: rotateY(0deg) translateX(0) scale(1);  
}  

#scroller .right {  
  -webkit-transform: rotateY(-25deg) translateX(320px) skewY(5deg) scale(0.4, 0.6);  
  -moz-transform: rotateY(-25deg) translateX(320px) skewY(5deg) scale(0.4, 0.6);  
}  

#scroller .left-hidden {  
  opacity: 0;  
  z-index: -1;  
  -webkit-transform: rotateY(25deg) translateX(-430px) skewY(-5deg) scale(0.3, 0.5);  
  -moz-transform: rotateY(25deg) translateX(-430px) skewY(-5deg) scale(0.3, 0.5);  
}  

#scroller .right-hidden {  
  opacity: 0;  
  z-index: -1;  
  -webkit-transform: rotateY(-25deg) translateX(430px) skewY(5deg) scale(0.3, 0.5);  
  -moz-transform: rotateY(-25deg) translateX(430px) skewY(5deg) scale(0.3, 0.5);  
}  

.nav {  
  position: absolute;  
  width: 100%;  
  height: 30px;  
  margin: 170px 0 0;  
  z-index: 2;  
  display: none;  
}  

.prev, .next {  
  position: absolute;  
  display: block;  
  height: 30px;  
  width: 30px;  
  background-color: rgba(0,0,0,0.85);  
  border-radius:15px;  
  color: #E4E4E4;  
  bottom: 15px;  
  left: 15px;  
  text-align: center;  
  line-height: 26px;  
  cursor: pointer;  
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5), 0 0 0 1px rgba(0,0,0,0.7);  
}  

.next {  
  left: inherit;  
  right: 15px;  
}  

.prev:hover, .next:hover {  
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.5), 0 0 0 1px rgba(0,0,0,0.7);  
}

var itemPositions = new Array();  
var numberOfItems = $('#scroller .item').length;  
function assignPositions() {  
  for (var i = 0; i < numberOfItems; i++) {  
  if (i === 0) {  
  itemPositions[i] = 'left-hidden';  
  } else if (i === 1) {  
  itemPositions[i] = 'left';  
  } else if (i === 2) {  
  itemPositions[i] = 'middle';  
  } else if (i === 3) {  
  itemPositions[i] = 'right';  
  } else {  
  itemPositions[i] = 'right-hidden';  
  }  
  }  
  $('#scroller .item').each(function(index) {  
  $(this).addClass(itemPositions[index]);  
  });  
}  
function scroll(direction) {  
  if (direction === 'prev') {  
  itemPositions.push(itemPositions.shift());  
  } else if (direction === 'next') {  
  itemPositions.unshift(itemPositions.pop());  
  }  
  $('#scroller .item').removeClass('left-hidden left middle right right-hidden').each(function(index) {  
  $(this).addClass(itemPositions[index]);  
  });  
}  
$(document).ready(function() {  

  assignPositions();  
  var intvl = window.setInterval("scroll('next')", 4000);  
  $('#scroller').hover(function() {  
  window.clearInterval(intvl);  
  $('.nav').stop(true, true).fadeIn(200);  
  }, function() {  
  intvl = window.setInterval("scroll('next')", 4000);  
  $('.nav').stop(true, true).fadeOut(200);  
  });  
  $('.prev').click(function() {  
  scroll('prev');  
  });  
  $('.next').click(function() {  
  scroll('next');  
  });  

});