How can i make this JS Slider Auto Play on every three second

Question

Here is a simple JS slider that has a previous and next button to change slide. I want to add one extra feature that is auto play with previous and next button.

I tried .setInterval(function() { /* for every three second */ }, 3000); to .getElementById('button-next'); to trigger from jQuery $("#button-next" ).click();.

It is working BUT the problem is that when I change browser tab and after some time come back to my slider tab then its complete all pending trigger of $("#button-next" ).click(); immediately continuously that spoil my slider effect.

How can I fix this?

$(document).ready(function() {
  $('.sp').first().addClass('active');
  $('.sp').hide();
  $('.active').show();

  $('#button-next').click(function() {
    $('.active').removeClass('active').addClass('oldActive');
    if ($('.oldActive').is(':last-child')) {
      $('.sp').first().addClass('active');
    } else {
      $('.oldActive').next().addClass('active');
    }
    $('.oldActive').removeClass('oldActive');
    $('.sp').fadeOut();
    $('.active').fadeIn();
  });

  $('#button-previous').click(function() {
    $('.active').removeClass('active').addClass('oldActive');
    if ($('.oldActive').is(':first-child')) {
      $('.sp').last().addClass('active');
    } else {
      $('.oldActive').prev().addClass('active');
    }
    $('.oldActive').removeClass('oldActive');
    $('.sp').fadeOut();
    $('.active').fadeIn();
  });
});

body {
  font-size: 12px;
  font-family: 'Verdana';
}

#page-wrapper {
  margin: 0 auto;
  position: relative;
  width: 500px;
}

#slider-wrapper {
  width: 300px;
  height: 200px;
}

#slider {
  width: 300px;
  height: 200px;
  position: relative;
}

.sp {
  width: 300px;
  height: 200px;
  position: absolute;
  font-size: 20px;
  color: #fff;
}

#nav {
  margin-top: 20px;
  width: 50%;
}

#button-previous {
  float: left;
  cursor: pointer;
}

#button-next {
  margin-left: 250px !important;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div id="page-wrapper">
  <div id="slider-wrapper">
    <div id="slider">
      <div class="sp" style="background: blue;">1</div>
      <div class="sp" style="background: yellow;">2</div>
      <div class="sp" style="background: green;">3</div>
      <div class="sp" style="background: red;">4</div>
    </div>
  </div>
  <div id="nav"></div>
  <div id="button-previous">prev</div>
  <div id="button-next">next</div>
</div>

Answer 1

Step 1 -Move the "Next" function to be a standalone function

Step 2 - Use this function in every 3 sec.

Step 3 - To prevent glitchig after comeback to tab, just add check for document.visibilityState==='visible'

The Classic case is to use setInterval, like this:

$(document).ready(function(){
$('.sp').first().addClass('active');
$('.sp').hide();   
$('.active').show();

function next(){
      if(document.visibilityState!=='visible') return;
        $('.active').removeClass('active').addClass('oldActive');  
           if ( $('.oldActive').is(':last-child')) {
                $('.sp').first().addClass('active');
            }
            else{
                $('.oldActive').next().addClass('active');
            }
        $('.oldActive').removeClass('oldActive');
        $('.sp').fadeOut();
        $('.active').fadeIn();
    }
    $('#button-next').click(next);
   
    $('#button-previous').click(function(){
    $('.active').removeClass('active').addClass('oldActive');   
        if ( $('.oldActive').is(':first-child')) {
            $('.sp').last().addClass('active');
        }
        else{
                $('.oldActive').prev().addClass('active');
           }
    $('.oldActive').removeClass('oldActive');
    $('.sp').fadeOut();
    $('.active').fadeIn();
    });
    setInterval(next, 3000);
});

body{font-size:12px; font-family: 'Verdana';}
#page-wrapper{margin: 0 auto;position: relative;width: 500px;}
#slider-wrapper {width:300px; height:200px;}
#slider {width:300px; height:200px; position:relative;}
.sp {width:300px; height:200px; position:absolute; font-size:20px; color:#fff;}

#nav {margin-top:20px; width:50%;}
#button-previous {float:left; cursor:pointer;}
#button-next {margin-left: 250px !important;cursor:pointer;}

<!doctype html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>jQuery custom slider</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>


</head>
<body>
<div id="page-wrapper">
  <div id="slider-wrapper">
    <div id="slider">
      <div class="sp" style="background: blue;">1</div>
      <div class="sp" style="background: yellow;">2</div>
      <div class="sp" style="background: green;" >3</div>
      <div class="sp" style="background: red;">4</div>
    </div>
  </div>
  <div id="nav"></div>
  <div id="button-previous">prev</div>
  <div id="button-next">next</div>
</div>
</body>
</html>

But if you want to reset the counter after user handly go back/next then better use setTimeout, and reset the timeout on bacck/next functions. like this:

$(document).ready(function () {
    $('.sp').first().addClass('active');
    $('.sp').hide();
    $('.active').show();
    var t = 0;

    function next() {
        clearTimeout(t);
        if (document.visibilityState === 'visible') {
            $('.active').removeClass('active').addClass('oldActive');
            if ($('.oldActive').is(':last-child')) {
                $('.sp').first().addClass('active');
            } else {
                $('.oldActive').next().addClass('active');
            }
            $('.oldActive').removeClass('oldActive');
            $('.sp').fadeOut();
            $('.active').fadeIn();
        }
        t = setTimeout(next, 3000)
    }

    function prev() {
        clearTimeout(t);
        if (document.visibilityState === 'visible') {
            $('.active').removeClass('active').addClass('oldActive');
            if ($('.oldActive').is(':first-child')) {
                $('.sp').last().addClass('active');
            } else {
                $('.oldActive').prev().addClass('active');
            }
            $('.oldActive').removeClass('oldActive');
            $('.sp').fadeOut();
            $('.active').fadeIn();
        }
        t = setTimeout(next, 3000)
    }
    $('#button-next').click(next);
    $('#button-previous').click(prev);

    t = setTimeout(next, 3000)
});

body{font-size:12px; font-family: 'Verdana';}
#page-wrapper{margin: 0 auto;position: relative;width: 500px;}
#slider-wrapper {width:300px; height:200px;}
#slider {width:300px; height:200px; position:relative;}
.sp {width:300px; height:200px; position:absolute; font-size:20px; color:#fff;}

#nav {margin-top:20px; width:50%;}
#button-previous {float:left; cursor:pointer;}
#button-next {margin-left: 250px !important;cursor:pointer;}

<!doctype html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>jQuery custom slider</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>


</head>
<body>
<div id="page-wrapper">
  <div id="slider-wrapper">
    <div id="slider">
      <div class="sp" style="background: blue;">1</div>
      <div class="sp" style="background: yellow;">2</div>
      <div class="sp" style="background: green;" >3</div>
      <div class="sp" style="background: red;">4</div>
    </div>
  </div>
  <div id="nav"></div>
  <div id="button-previous">prev</div>
  <div id="button-next">next</div>
</div>
</body>
</html>

Answer 2

Try this Solution Prev and Next button now working

$('.sp').first().addClass('active');
  $('.sp').hide();
  $('.active').show();

  $('#button-next').click(function() {
    $('.active').removeClass('active').addClass('oldActive');
    if ($('.oldActive').is(':last-child')) {
      $('.sp').first().addClass('active');
    } else {
      $('.oldActive').next().addClass('active');
    }
    $('.oldActive').removeClass('oldActive');
    $('.sp').fadeOut();
    $('.active').fadeIn();
  });

  $('#button-previous').click(function() {
    $('.active').removeClass('active').addClass('oldActive');
    if ($('.oldActive').is(':first-child')) {
      $('.sp').last().addClass('active');
    } else {
      $('.oldActive').prev().addClass('active');
    }
    $('.oldActive').removeClass('oldActive');
    $('.sp').fadeOut();
    $('.active').fadeIn();
  });
var myIndex = 0;
carousel();

function carousel() {
  var i;
  var x = document.getElementsByClassName("sp");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";  
  }
  myIndex++;
  if (myIndex > x.length) {myIndex = 1}    
  x[myIndex-1].style.display = "block";  
  setTimeout(carousel, 2000); 
}

body {
  font-size: 12px;
  font-family: 'Verdana';
}

#page-wrapper {
  margin: 0 auto;
  position: relative;
  width: 500px;
}

#slider-wrapper {
  width: 300px;
  height: 200px;
}

#slider {
  width: 300px;
  height: 200px;
  position: relative;
}

.sp {
  width: 300px;
  height: 200px;
  position: absolute;
  font-size: 20px;
  color: #fff;
}

#nav {
  margin-top: 20px;
  width: 50%;
}

#button-previous {
  float: left;
  cursor: pointer;
}

#button-next {
  margin-left: 250px !important;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div id="page-wrapper">
  <div id="slider-wrapper">
    <div id="slider">
      <div class="sp" style="background: blue;">1</div>
      <div class="sp" style="background: yellow;">2</div>
      <div class="sp" style="background: green;">3</div>
      <div class="sp" style="background: red;">4</div>
    </div>
  </div>
  <div id="nav"></div>
  <div id="button-previous">prev</div>
  <div id="button-next">next</div>
</div>