javascriptjqueryautoscrolljcarousellite

jCarouselLite reset autoscroll interval


How can I reset the auto-scroll interval on my jCarouselLite carousel after some event so that it lets you look at the content for the full interval, regardless of how far along the timer was when you clicked next or previous? Right now, if I click next or previous after 9 seconds, it scrolls again after 1 second.

In the jCarouselLite source code on lines 274-277 is where the auto-scroll is implemented using setInterval. I know you can use clearInterval if you have the ID returned by setInterval, but there isn't one I can get outside of modifying the source code, and I don't want to do that.

Any ideas? Thanks!


Solution

  • jCarouselLite itself doesn't provide any easy way to stop the auto-scrolling, which is an easier problem then do what you seem to want (?did I understand this right: You just want the autoscroll to temporarily stop on click and then continue)

    Hacky + potentially buggy way to stop the autoscroll altogether

    var x; //hold interval id
    $(function() {
        var y = window.setInterval; //backup original setInterval function
        //overwrite with new function which stores the id for us
        window.setInterval = function() {
            x = y(arguments[0], arguments[1]);
            return x; 
        };
        //now construct carousel
        $(".anyClass").jCarouselLite({
            btnNext: ".next",
            btnPrev: ".prev",
            auto: 500 
        });
        //now restore original setInterval function
        //as we only needed the custom one for the carousel to capture the hidden
        //internal call to setInterval
        window.setInterval = y;
    });
    $("#stopAutoScrollButton").click(function() {
        clearInterval(x);
    });
    

    Real solution

    As we can't get jCarouselLite to do this on its own we simulate the auto behavior ourself.

    $(function() {
        var autoTime = 5000; //5s
        $(".anyClass").jCarouselLite({
            btnNext: ".next",
            btnPrev: ".prev"
        });
        //simulate autoscroll by simulating "click" on next link
        var x = setInterval("$('.next').trigger('click');", autoTime);
        //if stopAuto is clicked the autoscroll is suspended for autoTime
        //no matter how far along the timer already was
        $("#stopAuto").click(function() {
            clearInterval(x);
            x = setInterval("$('.next').trigger('click');", autoTime);
        });
    });