Люди, подскажите, как уменьшить скорость прокрутки слайдов в слайдере. Бьюсь уже сутки, не догоняю.
Вот код:
<!DOCTYPE html>
<html>
<head>
<!--
This carousel example is created with jQuery and the carouFredSel-plugin.
http://jquery.com
http://caroufredsel.frebsite.nl
-->
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<title>Automatic slideshow with a timer, play-, pause-, previous- and next-button</title>
<script src="lybrary/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="lybrary/jquery.carouFredSel-6.0.4-packed.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#carousel').carouFredSel({
prev: '#prev',
next: '#next',
auto: {
button: '#play',
progress: '#timer',
pauseOnEvent: 'resume'
},
scroll: {
fx: 'fade'
}
});
$('#wrapper').hover(function() {
$('#navi').stop().animate({
bottom: 0
});
}, function() {
$('#navi').stop().animate({
bottom: -60
});
});
});
</script>
<style type="text/css">
#wrapper {
border: 1px solid #ccc;
background-color: #fff;
width: 370px;
height: 310px;
padding: 20px;
margin: -220px 0 0 -320px;
position: absolute;
left: 50%;
top: 50%;
box-shadow: 0 5px 10px #ccc;
}
#inner {
position: relative;
width: 370px;
height: 310px;
overflow: hidden;
}
#carousel img {
display: block;
float: left;
}
#navi {
background-color: #333;
background-color: rgba(30, 30, 30, 0.8);
border-top: 1px solid #000;
width: 370px;
height: 70px;
position: absolute;
bottom: -60px;
left: 0;
z-index: 10;
}
#timer {
background-color: #222;
background-color: rgba(20, 20, 20, 0.8);
width: 0;
height: 70px;
position: absolute;
z-index: 20;
top: 0;
left: 0;
}
#prev, #next, #play {
display: block;
position: absolute;
z-index: 30;
}
#prev, #next {
width: 47px;
height: 47px;
top: 13px;
}
#play {
width: 53px;
height: 53px;
top: 10px;
background: url(images/ui/pause.png) 0 0 no-repeat transparent;
left: 50%;
margin-left: -27px;
}
#play.paused {
background: url(images/ui/play.png) 0 0 no-repeat transparent;
}
#prev {
background: url(images/ui/prev.png) 0 0 no-repeat transparent;
left: 220px;
}
#next {
background: url(images/ui/next.png) 0 0 no-repeat transparent;
right: 220px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="inner">
<div id="carousel">
<img src="images/slide1.png" alt="rally1" width="370" height="300" border="0" />
<img src="images/rally2.jpg" alt="rally2" width="370" height="300" border="0" />
<img src="images/rally3.jpg" alt="rally3" width="370" height="300" border="0" />
<img src="images/rally4.jpg" alt="rally4" width="370" height="300" border="0" />
</div>
<div id="navi">
<div id="timer"></div>
<a id="prev" href="#"></a>
<a id="play" href="#"></a>
<a id="next" href="#"></a>
</div>
</div>
</div>
</body>
</html>
