0

so how can I using setInterval to make my custom jquery slider change to the next slide each X seconds, I also set up next and prev buttons to navigate the sliders freely, problem is I want the timer to restart when one of these buttons is clicked. How could I do this?

This is the logic behing my jquery slider, it's fairly simple I think. I use active class to make the selected slider visible.

var interval = 7000;
 var sliders = $('.slider');
 var dots = $('.dot');
 var index = 0;
 var show_index = 0;
  
  //make first slider visible
     $('.slider').eq(show_index).addClass('slider_active');
  //give first navigation dot the active class
     $('.dot').eq(show_index).addClass('slider_active_dot');
     console.log(show_index);
     console.log(sliders.length);
 
 
     setInterval(function() {
        
      if(show_index == (sliders.length- 1)){
   
   
       $('.slider').eq(show_index).removeClass('slider_active');
                show_index = 0; // set it here
          $('.slider').eq(show_index).addClass('slider_active');
                $('.dot').removeClass('slider_active_dot');   
       $('.dot').eq(show_index).addClass('slider_active_dot');   
       console.log(show_index);
      }
  
      else{
   
   
       $('.slider').eq(show_index).removeClass('slider_active');
                show_index = show_index + 1; // set it here 
          $('.slider').eq(show_index).addClass('slider_active');
       $('.dot').removeClass('slider_active_dot');   
       $('.dot').eq(show_index).addClass('slider_active_dot');
                console.log(show_index);   
      }
        }, interval);
 
 
 
 
     $('.prev').click(function(){
  
      console.log('clicked prev');
  
          if(show_index == 0){
   
   
       $('.slider').eq(show_index).removeClass('slider_active');
                show_index = (sliders.length - 1);// set it here
          $('.slider').eq(show_index).addClass('slider_active');
                $('.dot').removeClass('slider_active_dot');   
       $('.dot').eq(show_index).addClass('slider_active_dot');   
       console.log(show_index);
      }
  
      else{
   
       $('.slider').eq(show_index).removeClass('slider_active');
                show_index = show_index - 1; // set it here 
          $('.slider').eq(show_index).addClass('slider_active');
       $('.dot').removeClass('slider_active_dot');   
       $('.dot').eq(show_index).addClass('slider_active_dot');
                console.log(show_index);   
      }
        });
 
 
 
     $('.next').click(function(){
  
      console.log('clicked next');
  
      if(show_index == (sliders.length- 1)){
   
   
       $('.slider').eq(show_index).removeClass('slider_active');
                show_index = 0; // set it here
          $('.slider').eq(show_index).addClass('slider_active');
                $('.dot').removeClass('slider_active_dot');   
       $('.dot').eq(show_index).addClass('slider_active_dot');
       console.log(show_index);
      }
  
      else{
   
   
       $('.slider').eq(show_index).removeClass('slider_active');
                show_index = show_index + 1; // set it here 
          $('.slider').eq(show_index).addClass('slider_active');
       $('.dot').removeClass('slider_active_dot');   
       $('.dot').eq(show_index).addClass('slider_active_dot');
                console.log(show_index);   
      }
        });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  • 1
    Possible duplicate of [Javascript - Reset setInterval back to 0](https://stackoverflow.com/questions/8126466/javascript-reset-setinterval-back-to-0) – Ivar Jul 28 '18 at 21:08

2 Answers2

0

Assign your setInterval() to a variable which you can use to clear the interval when the next or previous buttons are clicked.

var interval = 7000;
 var sliders = $('.slider');
 var dots = $('.dot');
 var index = 0;
 var show_index = 0;
  function timer(){
     if(show_index == (sliders.length- 1)){
   
   
       $('.slider').eq(show_index).removeClass('slider_active');
                show_index = 0; // set it here
          $('.slider').eq(show_index).addClass('slider_active');
                $('.dot').removeClass('slider_active_dot');   
       $('.dot').eq(show_index).addClass('slider_active_dot');   
       console.log(show_index);
      }
  
      else{
   
   
       $('.slider').eq(show_index).removeClass('slider_active');
                show_index = show_index + 1; // set it here 
          $('.slider').eq(show_index).addClass('slider_active');
       $('.dot').removeClass('slider_active_dot');   
       $('.dot').eq(show_index).addClass('slider_active_dot');
                console.log(show_index);   
      }
  }
  
  //make first slider visible
     $('.slider').eq(show_index).addClass('slider_active');
  //give first navigation dot the active class
 var itvl;
  $('.dot').eq(show_index).addClass('slider_active_dot');
     console.log(show_index);
     console.log(sliders.length);
 
 
     itvl = setInterval(function() {
      timer();
        }, interval);
 
 
 
 
     $('.prev').click(function(){
  
      console.log('clicked prev');
  
          if(show_index == 0){
   
   
       $('.slider').eq(show_index).removeClass('slider_active');
                show_index = (sliders.length - 1);// set it here
          $('.slider').eq(show_index).addClass('slider_active');
                $('.dot').removeClass('slider_active_dot');   
       $('.dot').eq(show_index).addClass('slider_active_dot');   
       console.log(show_index);
      }
  
      else{
   
       $('.slider').eq(show_index).removeClass('slider_active');
                show_index = show_index - 1; // set it here 
          $('.slider').eq(show_index).addClass('slider_active');
       $('.dot').removeClass('slider_active_dot');   
       $('.dot').eq(show_index).addClass('slider_active_dot');
                console.log(show_index);   
      }
        clearInterval(itvl);
        itvl = setInterval(function(){
         timer();
        }, interval);
        });
 
 
 
     $('.next').click(function(){
  
      console.log('clicked next');
  
      if(show_index == (sliders.length- 1)){
   
   
       $('.slider').eq(show_index).removeClass('slider_active');
                show_index = 0; // set it here
          $('.slider').eq(show_index).addClass('slider_active');
                $('.dot').removeClass('slider_active_dot');   
       $('.dot').eq(show_index).addClass('slider_active_dot');
       console.log(show_index);
      }
  
      else{
   
   
       $('.slider').eq(show_index).removeClass('slider_active');
                show_index = show_index + 1; // set it here 
          $('.slider').eq(show_index).addClass('slider_active');
       $('.dot').removeClass('slider_active_dot');   
       $('.dot').eq(show_index).addClass('slider_active_dot');
                console.log(show_index);   
      }
         clearInterval(itvl);
        itvl = setInterval(function(){
         timer();
        }, interval);
        });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="next">Next</button>
<p/>
<button class="prev">Previous</button>
Unmitigated
  • 76,500
  • 11
  • 62
  • 80
-1

I would recommend using setTimeout and clearTimeout. Clear and set every time the slider gets moved. See documentation and examples of these here: https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout

Anony Mous
  • 89
  • 5