<script type="text/javascript" src="/js/slides.js"></script>
<script type="text/javascript">
$(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>

.container {width:580px;padding:10px;margin:0 auto;position:relative;z-index:0;}
#example {width:600px;height:350px;position:relative;}
#ribbon {position:absolute;top:-3px;left:-15px;z-index:500;}
#frame {position:absolute;z-index:0;width:739px;height:341px;top:-3px;left:-80px;}
#slides {position:absolute;top:15px;left:4px;z-index:100;}
.slides_container {width:570px;overflow:hidden;position:relative;display:none;}
.slides_container div.slide {width:570px;height:270px;display:block;}
#slides .next, #slides .prev {position:absolute;top:107px;left:-39px;width:24px;height:43px;display:block;z-index:101;}
#slides .next {left:585px;}
.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(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:30px;padding:5px 20px 0 20px;background:#000;background:rgba(0, 0, 0, .5);width:540px;font-size:1.3em;line-height:1.33;color:#fff;border-top:1px solid #000;text-shadow:none;}
.slide{position: absolute; top: 0px; left: 570px; display: none; z-index: 0;}