Witajcie,
robię slider oparty na JS. W założeniu ma on być dosyć dynamiczny - klient sam dodaje slajdy. Chciałem dodać paginację, w tym celu też wygenerowałem odpowiednie elementy przez JS. No i to zrodziło problemy. Automatyczna zmiana slajdów jest zaburzona (w odpowiednim czasie zmienia się z 1->2, a następnie błyskawicznie na 3), jak również zmiana przez użycie paginacji - zmienia się na docelowy slajd, ale później jest zaburzony czas zmiany slajdów (skraca się blisko 2 razy). Poniżej kod:
// *--------- SLIDER ---------*
var countSlides = $('.slides').children('li').length;
var sliderControls = new Array();
$(window).load(function() {
$('.slider').children('.slides').css('width', countSlides*100+'%');
$('.slider').find('.slide').css('width', $('.slider').width()+'px');
});
// *------ CONFIGURATION ------*
var animationSpeed = 1000;
var pause = 10000;
var currentSlide = 1;
// *------ VARIABLES ------*
var $slider = $('.slider');
var $slides = $('.slider').children('.slides');
var $slide = $('.slider').find('.slide');
var interval;
function startSlider() {
interval = setInterval(function() {
if ((currentSlide+1) <= $slide.length) {
$slides.animate({'margin-left': '-=100%'}, animationSpeed, function() {
currentSlide++;
for (var i = 0; i < sliderControls.length; i++) {
sliderControls[i].removeClass('slide-active');
}
sliderControls[currentSlide-1].addClass('slide-active');
});
}
else {
$slides.animate({'margin-left': '+='+(--currentSlide*100)+'%'}, animationSpeed, function() {
currentSlide = 1;
for (var i = 0; i < sliderControls.length; i++) {
sliderControls[i].removeClass('slide-active');
}
sliderControls[currentSlide-1].addClass('slide-active');
});
}
}, pause);
}
function stopSlider() {
clearInterval(interval);
}
$(function() {
$slider.on('mouseenter', stopSlider()).on('mouseleave', startSlider());
startSlider();
});
function changeSlide(number) {
var currentMargin = $slides.css('margin-left');
if (number < currentSlide) {
$slides.animate({'margin-left': '+='+(currentSlide-(number-1))*100+'%'}, animationSpeed, function() {
currentSlide = number;
for (var i = 0; i < sliderControls.length; i++) {
sliderControls[i].removeClass('slide-active');
}
sliderControls[currentSlide-1].addClass('slide-active');
startSlider();
});
}
else {
$slides.animate({'margin-left': '-='+(number-currentSlide)*100+'%'}, animationSpeed, function() {
currentSlide = number;
for (var i = 0; i < sliderControls.length; i++) {
sliderControls[i].removeClass('slide-active');
}
sliderControls[currentSlide-1].addClass('slide-active');
startSlider();
});
}
}
$(window).load(function() {
$slider.append('<ul class="slider-controls">');
for (var i = 1; i <= countSlides; i++) {
$('.slider-controls').append('<li id="'+i+'" onClick="onSliderControlsClick('+i+');">');
}
$slider.append('<ul>');
$('.slider-controls').children('li').each(function() {
sliderControls.push($(this));
});
sliderControls[0].addClass('slide-active');
});
function onSliderControlsClick(id) {
stopSlider();
changeSlide(id);
}
JavaScript 
Maciej Cąderek