CODEWITHSUNDEEP
javascriptjquery
Dominik Śliwiński
Dominik Śliwiński

Reputation: 48

How to add TimeOut to current slider code?

I'm doing an easy slider with buttons, it works fine, but I'd like to add TimeOut() function to current code, to allow slides to change automatically.

I tried to do that with jQuery but it didn't work.

$('.reviews-slider-button').click(function() {
    var i = $(this).index();
    $('.reviews-slider-person').hide();
    $('.reviews-slider-person-' + (i + 1)).show();
});

I'd like to change automatically slider every 10 seconds, and when I would click on .reviews-slider-button it would reset the timer ( to avoid situation I click to change slide, and timer automatically change to the next one). I'd be grateful for your advice's.

Upvotes: 1

Views: 1464

Answers (2)

4b0
4b0

Reputation: 22323

You can use setInterval to click your button every 10 seconds:

var timer = ''; // Make global variable
function ScrollAuto() {
  temp = setInterval(function() {
    $('.nextButton').click();
  }, 10000)
  return timer;
}

And to reset your timer, inside your reset button add:

clearInterval(timer);

Upvotes: 1

tizio
tizio

Reputation: 31

Similarly to the answer from Shree, but make it cleaner, but use timeout, not interval, you want the system to change slide every 10 seconds unless you click, in which case you reset the timeout, go to the next slide, and set up the next timeout

Something like this:

var slideMaxDuration = 10000; // in ms
var slideTimer = void 0;

function nextSlide() {
    clearInterval(slideTimer);
    // ... go to next slide ...
}

function autoContinue() {
    nextSlide();
    setTimeout(autoContinue, slideMaxDuration);
}

$('.reviews-slider-button').click(autoContinue);

You also need to set up the initial autoContinue when you want the whole thing to start.

Upvotes: 0

Related Questions