Reset timer when using prev next in slide show

I have a slide show with two slides. Each slide is held for 5-6 seconds before changing, but when I use the previous buttons, this does not work. One way or another, it saves the original timer (from the self-timer), so when I select "next", for example, 1 second before the transition, the next slide will remain for one second. Therefore, when I select the following, it does not reset the timer and instead saves the original timer.

So, in conclusion, I want to reset the timer in the previous next functions (or if you have any other ideas that will be appreciated).

This is JS:

"use strict";

var currentSlide = 1;
var transition = 1000;
var slideLength = 2;
var slideInter = 6000;

$(".slider ul li:nth-child(" + currentSlide + ")").fadeIn(transition);

$(".next").click(function () {
    nextSlide();
});

$(".prev").click(function () {
    prevSlide();
});

function nextSlide() {
    $(".slider ul li:nth-child(" + currentSlide + ")").fadeOut(transition);
    currentSlide++;
    if (currentSlide > slideLength) 
        currentSlide = 1;
    $(".slider ul li:nth-child(" + currentSlide + ")").fadeIn(transition);
}

function prevSlide() {
    $(".slider ul li:nth-child(" + currentSlide + ")").fadeOut(transition);
    currentSlide--;
    if (currentSlide < 1)
        currentSlide = 2;

    $(".slider ul li:nth-child(" + currentSlide + ")").fadeIn(transition);
}

   //UPDATED CODE   


var timer = setInterval(nextSlide, slideInter);

function resett() {
  clearInterval(timer);}

function timing () {
  timer = setInterval(nextSlide, slideInter);}

$(".slider").hover(resett,timing);

Let me know if you need more information or if you do not understand something from what I said.

+4
source
2

, clearInterval "hover" nextSlide prevSlide. , nextSlide prevSlide, reset .

+2

? .

- :

var isBeingHovered = false;
$('.slider').hover(function(){
  isBeingHovered = true;
}, function(){
  isBeingHovered = false;
  setTimeout(timerFunction, slideInter); //Optional. Resume when stops hovering.
});

(function timerFunction(){
  nextSlide();
  if(isBeingHovered === true)
    setTimeout(timerFunction, slideInter);
})()
+1

All Articles