<style>#slider {  
width: 410px; /* important to be same as image width */  
height: 300px; /* important to be same as image height */  
position: relative; /* important */  
overflow: hidden; /* important */  
  }  

  #slider1, #slider2 {  
width: 720px; /* important to be same as image width */  
height: 300px; /* important to be same as image height */  
position: relative; /* important */  
overflow: hidden; /* important */  
  }  

  #sliderContent, #slider1Content, #slider2Content {  
width: 720px;  
position: absolute;  
top: 0;  
margin-left: 0;  
  }  
  .sliderImage, .slider1Image, .slider2Image {  
float: left;  
position: relative;  
display: none;  
  }  
  .sliderImage span {  
position: absolute;  
font: 10px/15px Arial, Helvetica, sans-serif;  
padding: 10px 13px;  
width: 384px;  
background-color: #000;  
filter: alpha(opacity=70);  
-moz-opacity: 0.7;  
-khtml-opacity: 0.7;  
opacity: 0.7;  
color: #fff;  
display: none;  
  }  

  .slider1Image span, .slider2Image span {  
position: absolute;  
font: 10px/15px Arial, Helvetica, sans-serif;  
padding: 10px 13px;  
width: 694px;  
background-color: #000;  
filter: alpha(opacity=70);  
-moz-opacity: 0.7;  
-khtml-opacity: 0.7;  
opacity: 0.7;  
color: #fff;  
display: none;  
  }  
  .clear {  
clear: both;  
  }  
  .sliderImage span strong, .slider1Image span strong, .slider2Image span strong {  
font-size: 14px;  
  }  
  .top {  
top: 0;  
left: 0;  
  height: 110px;  
  }  
  .bottom {  
bottom: 0;  
left: 0;  
  height: 110px;  
  }  
  .left {  
top: 0;  
left: 0;  
width: 110px !important;  
height: 280px;  
  }  
  .right {  
right: 0;  
bottom: 0;  
width: 110px !important;  
height: 290px;  
  }</style>

<script type="text/javascript" src="/js/s3Slider.js"></script>  
  <script type="text/javascript">
$(document).ready(function() {  
$('#slider').s3Slider({  
timeOut: 3000  
});  
$('#slider1').s3Slider({  
timeOut: 4000
});  
$('#slider2').s3Slider({  
timeOut: 5000
});  
});  
  </script>

<div id="slider">  
<ul id="sliderContent">  
<li class="sliderImage">  
<img src="Ссылка на картинку" />  
<span class="top">Описание картинки</span>  
</li>  
<li class="sliderImage">  
<img src="Ссылка на картинку" />  
<span class="bottom">Описание картинки</span>  
</li>  
<div class="clear sliderImage"></div>  
</ul>  
  </div>