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

[AfraidAlex]

Написал карусельку, подскажите - как лучше доработать код?
Ошибка появляется, если кликать очень быстро на '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, но ведь от "третьего быстрого клика" не избавит?

[skrudjmakdak]

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

[skrudjmakdak]

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

[AfraidAlex]

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

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

[skrudjmakdak]

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

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

[AfraidAlex]

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

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

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

[AfraidAlex]

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

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

[skrudjmakdak]

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

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

[vadim5june]

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

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

[skrudjmakdak]

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

$('.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);
	});

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