$(document).ready(function() {
//Tworzenie Kontrolek
var html = "
- ";
$('#slider ul li').each(function(i) {
html += " - " + (i+1) + "";
});
html += "
$('#slider').after(html);
//Koniec tworzenia kontrolek
//Ustawianie
var width = $('#slider').width();
var slides = $('#slider li').length;
$('#slider ul').css("width", "" + (width*slides) + "");
//Koniec ustawiania
//Animowanie Slide'ow
var cur = 1;
var kontrolka = -1;
var slider = setInterval(function() {
if(cur < slides){
$('#slider ul').animate({left: "-" + (cur*width) + "px"},"linear");
cur+=1;
kontrolka+=1;
}
if(cur == slides){
$('#slider ul').delay(3000).animate({left: "0px"},"linear");
cur=1;
kontrolka=0;
}
//Kontrolki
$('#controls li').removeClass("active");
$('#controls li:contains(' + kontrolka + ')').addClass("active");
//Koniec Kontrolek
}, 3000);
//Koniec Animowania Slidow
//Klikanie Kontrolek
$('#controls li').click(function() {
var clicked = $(this).attr('id');
$('#slider ul').animate({left: "-" + ((clicked-1)*width) + "px"},500,"linear");
clearInterval(slider);
});
//Koniec klikania Kontrolek
});
< /code>
Iive некоторые проблемы с ним с ним, потому что он контролирует от 1 до 4, оставляют 5 переходит к 1, а на этом 1 изображение из слайда № 5, я действительно не знаю, что не так, может кто -нибудь мне помочь? < /p>
http://jsfiddle.net/sck5w/ Посмотрите, как работает навигация: 1 2 3 4 хорошо 5 пропущено и снова 1
Подробнее здесь: https://stackoverflow.com/questions/134 ... r-controls
Мобильная версия