Currently, my slider is Autoswitching slides, which works great. But when you start clicking the next/previous buttons, it doesn't reset the interval speed which can get janky. How might I set the interval to reset when the next/previous buttons are clicked?

See my functioning example here: Codepen

And here's the JS:

$(document).ready(function(){
    // options
    var speed = 1000; //transition speed - fade
    var autoswitch = true; //auto slider options
    var autoswitch_speed = 8000; //auto slider speed

    // add first initial active class
    $(".slide").first().addClass("active");

    // hide all slides
    $(".slide").hide;

    // show only active class slide
    $(".active").show();

    // Next Event Handler
    $('#next').on('click', nextSlide);// call function nextSlide

    // Prev Event Handler
    $('#prev').on('click', prevSlide);// call function prevSlide

    // Auto Slider Handler
    if(autoswitch == true){
        setInterval(nextSlide,autoswitch_speed);// call function and value 4000
    }

    // Switch to next slide
    function nextSlide(){
        $('.active').removeClass('active').addClass('oldActive');
        if($('.oldActive').is(':last-child')){
            $('.slide').first().addClass('active');
        } else {
            $('.oldActive').next().addClass('active');
        }
    // Delay removal of .oldActive until it is off-screen
    $('.oldActive').delay(1500).queue(function(next){
      $(this).removeClass("oldActive");
      next();
    });
        $('.active').fadeIn(speed);
    }

    // Switch to prev slide
    function prevSlide(){
        $('.active').removeClass('active').addClass('oldActive');
        if($('.oldActive').is(':first-child')){
            $('.slide').last().addClass('active');
        } else {
            $('.oldActive').prev().addClass('active');
        }
    // Delay removal of .oldActive until it is off-screen
        $('.oldActive').delay(1500).queue(function(next){
      $(this).removeClass("oldActive");
      next();
    });
        $('.active').fadeIn(speed);
    }
});

CodePudding user response：

You can use clearInterval() to do this. You should clear the interval that you have defined before when the nextSlide() and prevSlide() functions are being called. After clearing the interval you should again call setInterval(). I have did the changes to your code to make it work.

$(document).ready(function(){
    // options
    var speed = 1000; //transition speed - fade
    var autoswitch = true; //auto slider options
    var autoswitch_speed = 8000; //auto slider speed
    let interval;

    // add first initial active class
    $(".slide").first().addClass("active");

    // hide all slides
    $(".slide").hide;

    // show only active class slide
    $(".active").show();

    // Next Event Handler
    $('#next').on('click', nextSlide);// call function nextSlide

    // Prev Event Handler
    $('#prev').on('click', prevSlide);// call function prevSlide

    // Auto Slider Handler
    if(autoswitch == true){
        interval = setInterval(nextSlide,autoswitch_speed);// call function and value 4000
    }
  
  function resetInterval() {
    if(autoswitch === true && interval !== null) {
      clearInterval(interval);
      interval = setInterval(nextSlide,autoswitch_speed);// call 
    }
  }

    // Switch to next slide
    function nextSlide(){
        $('.active').removeClass('active').addClass('oldActive');
        if($('.oldActive').is(':last-child')){
            $('.slide').first().addClass('active');
        } else {
            $('.oldActive').next().addClass('active');
        }
    // Delay removal of .oldActive until it is off-screen
    $('.oldActive').delay(1500).queue(function(next){
      $(this).removeClass("oldActive");
      next();
    });
        $('.active').fadeIn(speed);
        resetInterval()
    }

    // Switch to prev slide
    function prevSlide(){
        $('.active').removeClass('active').addClass('oldActive');
        if($('.oldActive').is(':first-child')){
            $('.slide').last().addClass('active');
        } else {
            $('.oldActive').prev().addClass('active');
        }
    // Delay removal of .oldActive until it is off-screen
        $('.oldActive').delay(1500).queue(function(next){
      $(this).removeClass("oldActive");
      next();
    });
        $('.active').fadeIn(speed);
       resetInterval()
    }
});