clearInterval not working on click
<p>I have a simple slideshow script which rotates images at a given interval. It has "previous" and "next" buttons for navigating through the slideshow. Upon being clicked these buttons call clearInterval and set a new timer, but the problem is that the clearInterval function doesn't seem to work and the timers just stack up.</p>

<p>Here is the script:</p>

<pre><code>        $(document).ready(function() {
        var currentPosition = 0;
        var slideWidth = 570;
        var slides = $(".slide");
        var slidesNumber = slides.length;
        var slideshowInterval;
        var speed = 5000;

        slideShowInterval = setInterval(changePosition, speed);

        slides.wrapAll('&lt;div id="slides_holder"&gt;&lt;/div&gt;');

        $("#slides_holder").css("width", slideWidth*slidesNumber);

        $("#left_arrow").click(function() {
            if (currentPosition == 0) {
                currentPosition = slidesNumber-1;
            }
            else {
                currentPosition--;
            }

            clearInterval(slideshowInterval);
            slideShowInterval = setInterval(changePosition, speed);
            moveSlide();
        });

        $("#right_arrow").click(function() {
            if (currentPosition == slidesNumber-1) {
                currentPosition = 0;
            }
            else {
                currentPosition++;
            }

            clearInterval(slideshowInterval);
            slideShowInterval = setInterval(changePosition, speed);
            moveSlide();
        });

        function changePosition() {
            if (currentPosition == slidesNumber-1) {
                currentPosition = 0;
            } else {
                currentPosition++;
            }
            moveSlide();
        }

        function moveSlide() {
            $("#slides_holder").animate({"marginLeft": slideWidth*(-currentPosition)});
        }
    });
</code></pre>

<p>Could someone point out my mistake? Thanks in advance!</p>
