Здравствуйте.
Я тут решил написать велосипед.
Слайдер. И понял, что есть один у меня косяк.
Если нажать "Следующий слайд (NEXT)", до того как закончится анимация, то к стоящему на тот момент параметру css.('left') отправится новая порция прибавки координат.
В итоге у меня слайдер прокручивается на половину слайда (или где был слайд в момент повторного клика).
Я хотел попытаться сделать недоступной функцию $('dots').click таймером. Пытался придумать с setTimeout, но видимо идея была не очень.
Собственно мое изваяние:
$(document).ready(function(){
var dots = true;
var timer = true;
var obj = $('#position_slider');
var slide_width = obj.innerWidth();
obj.css({'height':slide_width});
var slide_length = obj .find('li').length;
console.log(slide_length);
function start_timer(){
setTimeout(timeout_click, 1350);
console.log(setTimeout(timeout_click, 1350));
}
function timeout_click() {
timer = true;
}
if (slide_length > 1){
obj.find('li').each(function(i,elem){
var position_slide = slide_width * i;
$(this).css({'left':position_slide});
$(this).css({'transition':'left 1s ease 0.3s'});
});
if(dots){
obj.after('<span class="dot next">></span>');
obj.after('<span class="dot prev"><</span>');
}
}
if (dots){
var count_next = 1;
var count_prev = 1;
if (timer){
$('.dot').click(function(){
if (count_next >= slide_length){
obj.find('li').each(function(j,elem){
var re_position_slide = slide_width * j;
$(this).css({'left':re_position_slide});
count_prev--;
count_next--;
console.log(count_prev);
});
}
else if(count_prev <= slide_length){
if ($(this).hasClass('next')){
console.log('click next');
var anime_step = '-=' + slide_width;
obj.find('li').animate({'left': anime_step}, "slow");
count_next++;
count_prev--;
console.log(count_next);
}
if ($(this).hasClass('prev') && count_prev > 1){
console.log('click prev');
console.log('click next');
var anime_step = '+=' + slide_width;
obj.find('li').animate({'left': anime_step}, "slow");
count_next--;
count_prev++;
console.log(count_next);
}
}
start_timer();
timer = false;
});
}
}
});
То место где я это пытаюсь развернуть.
http://bitco-in.ru/dushevaya-shtorka-erlit-10109v