.container {padding:10px;margin:0 auto;position:relative;z-index:0;}
#example {width:470px;height:350px;position:relative;}
#frame {position:absolute;z-index:0;width:619px;height:341px;top:-3px;left:-67px;}
#slides {position:absolute;top:15px;left:4px;z-index:100;}
.slides_container {width:476px;overflow:hidden;position:relative;display:none;}
.slides_container div.slide {width:490px;height:270px;display:block;}
#slides .next, #slides .prev {position:absolute;top:107px;left:-38px;width:24px;height:43px;display:block;z-index:101;}
#slides .next {left:490px;}
.pagination {margin:26px auto 0;width:100px;}
.pagination li {float:left;margin:0 1px;list-style:none;}
.pagination li a {display:block;width:12px;height:0;padding-top:12px;background-image:url(/sl/paginati.png);background-position:0 0;float:left;overflow:hidden;}
.pagination li.current a {background-position:0 -12px;}
.caption {z-index:500;position:absolute;bottom:-35px;left:0;height:40px;padding:0 20px;background:#000;background:rgba(0, 0, 0, .5);width:437px;font-size:12px;color:#fff;order-top:1px solid #000;text-shadow:none;}
.slide{position: absolute; top: 0px; left: 477px; display: none; z-index: 0;}
.slide img {width: 476px; height: 270px;}

<script src="/sl/slides.js"></script>
<script>
$(function(){
$('#slides').slides({
preload: true,
preloadImage: 'loading.gif',
play: 5000,
pause: 2500,
hoverPause: true,
animationStart: function(current){
$('.caption').animate({
bottom:-35
},100);
if (window.console && console.log) {
console.log('animationStart on slide: ', current);
};
},
animationComplete: function(current){
$('.caption').animate({
bottom:0
},200);
if (window.console && console.log) {
console.log('animationComplete on slide: ', current);
};
},
slidesLoaded: function() {
$('.caption').animate({
bottom:0
},200);
}
});
});</script>

<div class="container" id="example"><div id="slides"><div class="slides_container">

<div class="slide">
<a href="#"><img src="/sl/slide-10.jpg" alt="Slide 1" /></a>
<div class="caption" style="bottom:0"><p>Логотип uCoz</p>
</div></div>

<div class="slide">
<a href="#"><img src="/sl/slide-20.jpg" alt="Slide 2" /></a>
<div class="caption">
<p>Тут описание</p>
</div></div>

<div class="slide">
<a href="#"><img src="/sl/slide-30.jpg" alt="Slide 3" /></a>
<div class="caption">
<p>Opa Gangnam Style :D</p>
</div></div>

<div class="slide">
<a href="#"><img src="/sl/slide-40.jpg" alt="Slide 4" /></a>
<div class="caption">
<p>Описание текста, представим, что тут много текста.</p>
</div></div>

<div class="slide">
<a href="#"><img src="/sl/slide-50.jpg" alt="Slide 5" /></a>
<div class="caption">
<p>Описание</p>
</div></div>

<div class="slide">
<a href="#"><img src="/sl/slide-60.jpg" alt="Slide 6" /></a>
<div class="caption">
<p>Логотип uCoz'a</p>
</div></div>

<div class="slide">
<a href="#"><img src="/sl/slide-70.jpg" alt="Slide 7" /></a>
<div class="caption">
<p>Логотип uCoz'a</p>
</div></div>

</div>

<a href="#" class="prev"><img src="/sl/arrow-prev.png" width="24" height="43" alt="Arrow Prev" /></a>
<a href="#" class="next"><img src="/sl/arrow-next.png" width="24" height="43" alt="Arrow Next" /></a>

</div>
<img src="/sl/example-.png" alt="Example Frame" id="frame" />
</div>