Грамотное построение карусели
 

Написал карусельку, подскажите - как лучше доработать код?
Ошибка появляется, если кликать очень быстро на 'prev' или 'next' - карусель "проезжает" наше else

$(document).ready(function() {
	$('.slider ul').each(function() { // ширина каруселек
		child = $(this).children('li');
		$(this).width(child.length * (child.width() + parseInt(child.css('marginLeft'), 10) + parseInt(child.css('marginRight'), 10) ) );
		$(this).after('<div class="next"></div>').before('<div class="prev"></div>')
	});
	
	slide=$('.slider ul li');
	mLeft=parseInt(slide.css('marginLeft'), 10);
	mRight=parseInt(slide.css('marginRight'), 10);
	totWidth=mLeft+mRight+slide.width(); // Полная длинна одного слайда

	$('.slider .next').click(function() { // Вправо
		if ($(this).prev('ul').css('marginLeft') != -(totWidth)*(slide.length-1)+'px') {
			$(this).prev('ul').stop(false, true).animate({
				marginLeft: -(totWidth)+parseInt(slide.parent().css('marginLeft'), 10)
			}, 300);
		} else { // вперед не заезжаем
			$(this).prev('ul').stop(false, true).animate({marginLeft: 0}, 300);
		}
	})
	
	$('.slider .prev').click(function() { // Влево
		if (parseInt($(this).next('ul').css('marginLeft'), 10) != '0') {			
			$(this).next('ul').stop(false, true).animate({
				marginLeft: totWidth + parseInt(slide.parent().css('marginLeft'), 10)
			} ,300)
		} else { // назад не заезжаем
			$(this).next('ul').stop(false, true).animate({marginLeft: -(totWidth)*(slide.length-1)}, 300)
		}
	});
		
});

Не критикуйте сильно, только начинаю писать на js.
Думал по поводу события dblclick() - задать ему return false, но ведь от "третьего быстрого клика" не избавит?

а готовую карусель взять не вариант??))

смотрите в фаербаге (отладчик ошибок). что в консоль выводит? или в консоли пусто?

В готовых обычно куча лишних функций, которые нагружают страницу, у меня же 15 строчек только с тем, что нужно

так и jquery почти 100кбайт весит.. вы же ее используйте и ничего. не тормозит и работает. так же и здесь..

помоему, вы не поняли суть проблемы :) Ошибок в коде нет. Мне нужно обработать событие "быстрых кликов" по переключалкам.

http://codepen.io/alex_misch/pen/hncjD вот пример, попробуйте пощелкать по красным прямоугольникам очень быстро

Это всего одна из тех функций, которые мне нужны от этой библиотеки. Если я подключу 40 плагинов на нативе - представьте сколько это сожрет времени на прогрузку страницы

подгрузите ext))

Попробуйте использовать в animate функцию complete
задаем глобальную переменную var aa=0;
$('.slider .next').click(function() { if(aa)return;aa=1;//
а по завершении анимации в функции complete aa=0
-----------------
идея на время анимации запретить клики на prev и next

попробуйте так:

$('.slider .prev').click(function() { // Влево
		if (parseInt($(this).next('ul').css('marginLeft'), 10) != '0') {			
			$(this).next('ul').stop(false, true).animate({
				marginLeft: totWidth + parseInt(slide.parent().css('marginLeft'), 10)
			} ,300)
		} else { // назад не заезжаем
			$(this).next('ul').stop(false, true).animate({marginLeft: -(totWidth)*(slide.length-1)}, 300)
		}
else console.log(1);
	});

посмотрите, в консоль ничего не валится??

не оффтопьте, плиз. Мне не нужно искать ошибки в коде, мне нужна помощь в доработке кода



Спасибо! То, что нужно

я вам и показываю, в каком месте у вас не доработка

else console.log(1);
в середине функции - к какому if оно относится? Извините, но вы написали бред.
Код доработал, спасибо vadim5june!


$(document).ready(function() {
$('.slider ul').each(function() { // ширина каруселек
child = $(this).children('li');
$(this).width(child.length * (child.width() + parseInt(child.css('marginLeft'), 10) + parseInt(child.css('marginRight'), 10) ) );
$(this).after('<div class="next"></div>').before('<div class="prev"></div>')
});
aa=true;
slide=$('.slider ul li');
mLeft=parseInt(slide.css('marginLeft'), 10);
mRight=parseInt(slide.css('marginRight'), 10);
totWidth=mLeft+mRight+slide.width(); // Полная длинна одного слайда

$('.slider .next').click(function() { // Вправо
if ($(this).prev('ul').css('marginLeft') != -(totWidth)*(slide.length-1)+'px' && aa) {
aa=false;
$(this).prev('ul').stop(false, true).animate({
marginLeft: -(totWidth)+parseInt(slide.parent().css('marginLeft '), 10)
}, 300, function() {aa=true});
} else { if(aa) {// вперед не заезжаем
$(this).prev('ul').stop(false, true).animate({marginLeft: 0}, 300);
}
}
})

$('.slider .prev').click(function() { // Влево
if (parseInt($(this).next('ul').css('marginLeft'), 10) != '0' && aa) {
aa=false;
$(this).next('ul').stop(false, true).animate({
marginLeft: totWidth + parseInt(slide.parent().css('marginLeft'), 10)
} ,300, function() {aa=true})
} else { if(aa) { // назад не заезжаем
$(this).next('ul').stop(false, true).animate({marginLeft: -(totWidth)*(slide.length-1)}, 300)
}
}
});

});

согласен, не доглядел. я просто к такому стилю закрыванию\открыванию кавычек не привык. огляделся

Все равно спасибо за попытки помочь :)