I am working on a custom image carousel, using jQuery and CSS. My aim is to make it really  lightweight   but with (just) enough features: "bullets", auto-advance, responsiveness.

The slider had a bug (described in detail HERE): when I clicked 2 bullets in rapid succession, the transition would overlap, instead of "standing in line". The fix I found is making all the bullets except the active one non-responsive to clicks,  instead of queueing the clicks :

1. var $elm = $('.slider'),
2.     $slidesContainer = $elm.find('.slider-container'),
3.     slides = $slidesContainer.children('a'),
4.     slidesCount = slides.length,
5.     slideHeight = $(slides[0]).find('img').outerHeight(false),
6.     animationspeed = 1500,
7.     animationInterval = 7000;
8. 
   
9. // Set (initial) z-index for each slide
10. var setZindex = function() {
11.     for (var i = 0; i < slidesCount; i++) {
12.         $(slides[i]).css('z-index', slidesCount - i);
13.     }
14. };
15. setZindex();
16. 
    
17. var displayImageBeforeClick = null;
18. 
    
19. var setActiveSlide = function() {
20.     $(slides).removeClass('active');
21.     $(slides[activeIdx]).addClass('active');
22. };
23. 
    
24. var advanceFunc = function() {
25.     if ($('.slider-nav li.activeSlide').index() + 1 != $('.slider-nav li').length) {
26.         $('.slider-nav li.activeSlide').next().find('a').trigger('click');
27.     } else {
28.         $('.slider-nav li:first').find('a').trigger('click');
29.     }
30. }
31. 
    
32. var autoAdvance = setInterval(advanceFunc, animationInterval);
33. 
    
34. //Set slide height
35. $(slides).css('height', slideHeight);
36. 
    
37. // Append bullets
38. if (slidesCount > 1) {
39.   /* Prepend the slider navigation to the slider
40.      if there are at least 2 slides */
41.   $elm.prepend('<ul class="slider-nav"></ul>');
42.   
43.   // make a bullet for each slide
44.   for (var i = 0; i < slidesCount; i++) {
45.     var bullets = '<li><a href="#">' + i + '</a></li>';
46.     if (i == 0) {
47.       // active bullet
48.       var bullets = '<li class="activeSlide"><a href="#">' + i + '</a></li>';
49.       // active slide
50.       $(slides[0]).addClass('active');
51.     }
52.     $('.slider-nav').append(bullets);
53.   }
54. };
55. 
    
56. var animationStart = false;
57. var slideUpDown = function() {
58.     animationStart = true;
59.     // set top property for all the slides
60.     $(slides).not(displayImageBeforeClick).css('top', slideHeight);
61.     // then animate to the next slide
62.     $(slides[activeIdx]).animate({
63.         'top': 0
64.     }, animationspeed, function() {
65.         animationStart = false;
66.     });
67. 
    
68.     $(displayImageBeforeClick).animate({
69.         'top': "-100%"
70.     }, animationspeed, function() {
71.         animationStart = false;
72.     });
73. };
74. 
    
75. $('.slider-nav a').on('click', function(event) {
76.     if (animationStart) {
77.         return false;
78.     }
79.     displayImageBeforeClick = $(".slider-container .active");
80.     activeIdx = $(this).text();
81.     if ($(slides[activeIdx]).hasClass("active")) {
82.         return false;
83.     }
84.     $('.slider-nav a').closest('li').removeClass('activeSlide');
85.     $(this).closest('li').addClass('activeSlide');
86.     // Reset autoadvance if user clicks bullet
87.     if (event.originalEvent !== undefined) {
88.         clearInterval(autoAdvance);
89.         autoAdvance = setInterval(advanceFunc, animationInterval);
90.     }
91. 
    
92.     setActiveSlide();
93.     slideUpDown();
94. });

I have posted a jsFuddle with all the code HERE .

Questions: How can I queue the clicks? Are there any better alternatives to queueing the clicks?