Question

Does anyone know how to stop this slideshow from ‘caching’ the amount of clicks through the slides? If I click the arrows 10 times then 10 slides will slide through is there a way to stop this? Or alternatively if you click the opposite arrow for it to cancel the ‘cached’ clicks from the other?

http://www.switchonthecode.com/tutorials/jquery-creating-a-slideshow

Thanks!

Answer 1

Using the one() function will probably do what you are looking for. Adjust the code to the following:

$(document).ready(function(){
    // The "one()" function means that this action is disconnected
    // from the element once the action occurs. In other words, click
    // it twice, and the second one does nothing.
    $("#slideshow-previous").one("click", showPreviousSlide);
    $("#slideshow-next").one("click", showNextSlide);
    ...
});

However just doing that isn’t enough. We have to hook up the event handler again after the animation is finished. Use the callback function for animate():

function updateContentHolder()
{
    ...
    $("#slideshow-scroller").animate({scrollLeft: scrollAmount}, 1000, function() {
        $("#slideshow-previous").one("click", showPreviousSlide);
        $("#slideshow-next").one("click", showNextSlide);
    });
}

---

As was pointed out in the comments this has the problem of attaching showPreviousSlide and showNextSlide multiple times to whichever button was not pressed. You can remedy this by doing just a little more work:

function showPreviousSlide()
{
    currentSlide--;
    updateContentHolder($(this).attr("id"), showPreviousSlide);
    updateButtons();
}

function showNextSlide()
{
    currentSlide++;
    updateContentHolder($(this).attr("id"), showNextSlide);
    updateButtons();
}

...

function updateContentHolder(id, callback)
{
    ...
    $("#slideshow-scroller").animate({scrollLeft: scrollAmount}, 1000, function() {
        $("#" + id).one("click", callback);
    });
}