StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>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)</p> <h2>Hacky + potentially buggy way to stop the autoscroll altogether</h2> <pre><code>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); }); </code></pre> <hr> <h2>Real solution</h2> <p>As we can't get jCarouselLite to do this on its own we simulate the <code>auto</code> behavior ourself.</p> <pre><code>$(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); }); }); </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload