Question

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.

Here is the script:

        $(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('<div id="slides_holder"></div>');

        $("#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)});
        }
    });

Could someone point out my mistake? Thanks in advance!

Answer 1

spelling mistake of slideshowInterval.

somewhere you’re using slideShowInterval and in some places slideshowInterval. Use any one.