<div class="slider">
  <img src="http://geoload.in/html-2/JQUERY_slider/1.jpg" alt="">
  <img src="http://geoload.in/html-2/JQUERY_slider/2.jpg" alt="">
  <img src="http://geoload.in/html-2/JQUERY_slider/3.jpg" alt="">  
  <div class="buttons">  
  <a href="#" class="prev"></a>
  <a href="#" class="next"></a>
  </div>  
  <span class="nav"></span>
  </div>
  <script src="http://geoload.in/html-2/JQUERY_slider/jquery.js"></script>
  <script src="http://geoload.in/html-2/JQUERY_slider/slider.js"></script>

.slider {  
  position:relative;  
  width: 960px;  
  height: 450px;  
  margin: 0 auto;  
}  
.slider img {  
  position: absolute;  
  top:0px;  
  left:0px;  
  display: none;  
  background-color: #f3f4ef;  
  border: 13px solid #dedede;  
}  
.slider .active {  
  display: block;  
  z-index: 100;  
}  
.nav {  
  z-index: 1000;  
  position: absolute;  
  bottom: 0;  
  text-align: center;  
  width: 100%;  
  padding: 10px 0 20px 0;  
}  
.nav a {  
  margin-right: 15px;  
  display: inline-block;  
  border-radius: 50%;  
  width: 10px;  
  background: #fff;  
  height: 10px;  
}  
.nav .navActive {  
  background: #666;  
  border: none;  
}  
.buttons {  
  width: 100%;  
  position:absolute;  
}  
.buttons a {  
  position:absolute;  
  z-index: 1000;  
  top: 230px;  
  height: 30px;  
  width: 30px;  
  background: url(http://geoload.in/html-2/JQUERY_slider/arrow.jpg);  
}  
.buttons .prev {  
  left:20px;  
}  
.buttons .next {  
  right:20px;  
  background-position: 30px 30px;  
}  
body {  
  -webkit-backface-visibility: hidden;  
}