Всем привет! Нашел скрипт для слайдера, подправил, и теперь у него какие то глюки, вначале все нормально правда на последнем слайде задержку не делает, кстати время прокрутки поставил большое но почему то все равно быстро крутит, так вот через некоторое время сам начинает крутить без остановок, стрелки не работают, а и не работает функция остановки слайдера при наведении мыши, хотя раньше работала.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/jquery-2.1.4.js"></script>
<script>
var slideWidth=980;
var sliderTimer;
$(function() {
$('.slidewrapper').width($('.slidewrapper').children().size()*slideWidth);
sliderTimer=setInterval(nextSlide,10000);
$('#slider').hover(function(){
clearInterval(sliderTimer);
},function(){
sliderTimer=setInterval(nextSlide,10000);
});
});
function nextSlide(){
var currentSlide=parseInt($('.slidewrapper').data('current'));
currentSlide++;
if(currentSlide>=$('.slidewrapper').children().size())
{
currentSlide=0;
}
$('.slidewrapper').animate({left: -currentSlide*slideWidth},980).data('current',currentSlide);
}
function prevSlide(){
var currentSlide=parseInt($('.slidewrapper').data('current'));
currentSlide--;
if(currentSlide<0)
{
currentSlide=$('.slidewrapper').children().size()-1;
}
$('.slidewrapper').animate({left: -currentSlide*slideWidth},980).data('current',currentSlide);
}
$(function(){
$('.slidewrapper').width($('.slidewrapper').children().size()*slideWidth);
sliderTimer=setInterval(nextSlide,20000);
$('#slider').hover(function(){
clearInterval(sliderTimer);
},function(){
sliderTimer=setInterval(nextSlide,1000);
});
$('#next_slide').click(function(){
clearInterval(sliderTimer);
nextSlide();
sliderTimer=setInterval(nextSlide,6000);
});
$('#prev_slide').click(function(){
clearInterval(sliderTimer);
prevSlide();
sliderTimer=setInterval(nextSlide,6000);
});
});
</script>
<style>
#slider {
width: 977px;
height: 300px;
position: relative;
overflow: hidden;
border: 3px solid rgba(75, 77, 97,0.6);
}
.slidewrapper{
position: absolute;
width:3000px;
left: 0;
top: 0;
height: 300px;
margin: 0;
padding: 0;
}
.slidewrapper .slide1 {
width:980px;
height:300px;
float:left;
list-style-type: none;
}
.slidewrapper .slide2 {
float:left;
}
#slider .arrows {
top:50%;
}
#slider #prev_slide {
z-index: 10000;
position: absolute;
left:0;
margin-top:-25px;
font-size:40px;
}
#slider #next_slide {
z-index: 10000;
position: absolute;
right:0;
margin-top:-25px;
font-size:40px;
}
</style>
</head>
<body>
<div id="slider">
<ul class="slidewrapper" data-current="0">
<li class="slide1"><img src="http://www.optimum1.ru/images/shapka2.jpg" alt="slide1"></li>
<li class="slide2"><img src="http://www.mccombs.utexas.edu/~/media/Images/MSB/Departments/IROM/Events/WSBA/Cool-Technology-Wallpaper-1-1920x1080%20cropped.jpg?h=300&w=980" alt="slide2"></li>
<li class="slide3"><img src="http://timebasedsales.com/wp-content/uploads/2012/11/tbs_fejlecek_980x300_KV_industries_general.jpg" alt="slide3"></li>
</ul>
<a href="javascript: void(0)" id="prev_slide" class="arrows"><</i></a>
<a href="javascript: void(0)" id="next_slide" class="arrows">></i></a>
</div>
</body>
</html>
