<style type="text/css">
  .container1 {  
border: 10px solid #666;  
-moz-border-radius: 10px;  
-webkit-border-radius: 10px;  
margin: auto;  
  }  
  .bullet {  
margin: 20px auto 20px;  
  }  
  .bullet-blur {  
background: url(/images/bullet1.gif) center no-repeat;  
float: left;  
height: 10px;  
margin-right: 10px;  
width: 10px;  
  }  
  .bullet-focus {  
background: url(/images/bullet2.gif) center no-repeat;  
float: left;  
height: 10px;  
margin-right: 10px;  
width: 10px;  
  }  
  .btn {  
text-align: center;  
  }  
  .donate {  
position: absolute;  
left: 10px;  
top: 10px;  
  }  
  </style>

  <script type="text/javascript" src="/js/easing.js"></script>
  <script type="text/javascript" src="/js/plugin.js"></script>
  <script type="text/javascript">
  $(document).ready(function(){  
$.easing.def = 'easeInOutExpo';  

$('.container1').slide({  
btnleft:'.btnl',  
btnright:'.btnr',  
bullet:true,  
bulletdisplay:'.bullet',  
bulletclassblur:'bullet-blur',  
bulletclassfocus:'bullet-focus',  
bulletmargin:'20',  
delay:'0.4',  
displayheight:'333px',  
displaywidth:'500px',  
innercontainer:'.inner',  
innerwidth:'2500px',  
startpage:'1',  
stepwidth:'500px'  
});  
  });  
  </script>

<div class="container1">
<div class="inner">  
  <img src="Ссылка на картинку" border="0">  
  <img src="Ссылка на картинку" border="0">  
  <img src="Ссылка на картинку" border="0">  
  <img src="Ссылка на картинку" border="0">  
  <img src="Ссылка на картинку" border="0">  
  </div>
  </div>

  <div class="bullet"></div>
  <div class="btn">
<button class="btnl">Вперёд</button>
<button class="btnr">Назад</button>
  </div>