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?
JavaScript
x
29
29
1
$(document).ready(function() {2
$('.sp').first().addClass('active');3
$('.sp').hide();4
$('.active').show();5
6
$('#button-next').click(function() {7
$('.active').removeClass('active').addClass('oldActive');8
if ($('.oldActive').is(':last-child')) {9
$('.sp').first().addClass('active');10
} else {11
$('.oldActive').next().addClass('active');12
}13
$('.oldActive').removeClass('oldActive');14
$('.sp').fadeOut();15
$('.active').fadeIn();16
});17
18
$('#button-previous').click(function() {19
$('.active').removeClass('active').addClass('oldActive');20
if ($('.oldActive').is(':first-child')) {21
$('.sp').last().addClass('active');22
} else {23
$('.oldActive').prev().addClass('active');24
}25
$('.oldActive').removeClass('oldActive');26
$('.sp').fadeOut();27
$('.active').fadeIn();28
});29
});JavaScript
1
44
44
1
body {2
font-size: 12px;3
font-family: 'Verdana';4
}5
6
#page-wrapper {7
margin: 0 auto;8
position: relative;9
width: 500px;10
}11
12
#slider-wrapper {13
width: 300px;14
height: 200px;15
}16
17
#slider {18
width: 300px;19
height: 200px;20
position: relative;21
}22
23
.sp {24
width: 300px;25
height: 200px;26
position: absolute;27
font-size: 20px;28
color: #fff;29
}30
31
#nav {32
margin-top: 20px;33
width: 50%;34
}35
36
#button-previous {37
float: left;38
cursor: pointer;39
}40
41
#button-next {42
margin-left: 250px !important;43
cursor: pointer;44
}JavaScript
1
14
14
1
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>2
<div id="page-wrapper">3
<div id="slider-wrapper">4
<div id="slider">5
<div class="sp" style="background: blue;">1</div>6
<div class="sp" style="background: yellow;">2</div>7
<div class="sp" style="background: green;">3</div>8
<div class="sp" style="background: red;">4</div>9
</div>10
</div>11
<div id="nav"></div>12
<div id="button-previous">prev</div>13
<div id="button-next">next</div>14
</div>Advertisement
Answer
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:
JavaScript
1
34
34
1
$(document).ready(function(){2
$('.sp').first().addClass('active');3
$('.sp').hide(); 4
$('.active').show();5
6
function next(){7
if(document.visibilityState!=='visible') return;8
$('.active').removeClass('active').addClass('oldActive'); 9
if ( $('.oldActive').is(':last-child')) {10
$('.sp').first().addClass('active');11
}12
else{13
$('.oldActive').next().addClass('active');14
}15
$('.oldActive').removeClass('oldActive');16
$('.sp').fadeOut();17
$('.active').fadeIn();18
}19
$('#button-next').click(next);20
21
$('#button-previous').click(function(){22
$('.active').removeClass('active').addClass('oldActive'); 23
if ( $('.oldActive').is(':first-child')) {24
$('.sp').last().addClass('active');25
}26
else{27
$('.oldActive').prev().addClass('active');28
}29
$('.oldActive').removeClass('oldActive');30
$('.sp').fadeOut();31
$('.active').fadeIn();32
});33
setInterval(next, 3000);34
});JavaScript
1
9
1
body{font-size:12px; font-family: 'Verdana';}2
#page-wrapper{margin: 0 auto;position: relative;width: 500px;}3
#slider-wrapper {width:300px; height:200px;}4
#slider {width:300px; height:200px; position:relative;}5
.sp {width:300px; height:200px; position:absolute; font-size:20px; color:#fff;}6
7
#nav {margin-top:20px; width:50%;}8
#button-previous {float:left; cursor:pointer;}9
#button-next {margin-left: 250px !important;cursor:pointer;}JavaScript
1
26
26
1
<!doctype html>2
3
<head>4
<meta charset="utf-8">5
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">6
<title>jQuery custom slider</title>7
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>8
9
10
</head>11
<body>12
<div id="page-wrapper">13
<div id="slider-wrapper">14
<div id="slider">15
<div class="sp" style="background: blue;">1</div>16
<div class="sp" style="background: yellow;">2</div>17
<div class="sp" style="background: green;" >3</div>18
<div class="sp" style="background: red;">4</div>19
</div>20
</div>21
<div id="nav"></div>22
<div id="button-previous">prev</div>23
<div id="button-next">next</div>24
</div>25
</body>26
</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:
JavaScript
1
42
42
1
$(document).ready(function () {2
$('.sp').first().addClass('active');3
$('.sp').hide();4
$('.active').show();5
var t = 0;6
7
function next() {8
clearTimeout(t);9
if (document.visibilityState === 'visible') {10
$('.active').removeClass('active').addClass('oldActive');11
if ($('.oldActive').is(':last-child')) {12
$('.sp').first().addClass('active');13
} else {14
$('.oldActive').next().addClass('active');15
}16
$('.oldActive').removeClass('oldActive');17
$('.sp').fadeOut();18
$('.active').fadeIn();19
}20
t = setTimeout(next, 3000)21
}22
23
function prev() {24
clearTimeout(t);25
if (document.visibilityState === 'visible') {26
$('.active').removeClass('active').addClass('oldActive');27
if ($('.oldActive').is(':first-child')) {28
$('.sp').last().addClass('active');29
} else {30
$('.oldActive').prev().addClass('active');31
}32
$('.oldActive').removeClass('oldActive');33
$('.sp').fadeOut();34
$('.active').fadeIn();35
}36
t = setTimeout(next, 3000)37
}38
$('#button-next').click(next);39
$('#button-previous').click(prev);40
41
t = setTimeout(next, 3000)42
});JavaScript
1
9
1
body{font-size:12px; font-family: 'Verdana';}2
#page-wrapper{margin: 0 auto;position: relative;width: 500px;}3
#slider-wrapper {width:300px; height:200px;}4
#slider {width:300px; height:200px; position:relative;}5
.sp {width:300px; height:200px; position:absolute; font-size:20px; color:#fff;}6
7
#nav {margin-top:20px; width:50%;}8
#button-previous {float:left; cursor:pointer;}9
#button-next {margin-left: 250px !important;cursor:pointer;}JavaScript
1
26
26
1
<!doctype html>2
3
<head>4
<meta charset="utf-8">5
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">6
<title>jQuery custom slider</title>7
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>8
9
10
</head>11
<body>12
<div id="page-wrapper">13
<div id="slider-wrapper">14
<div id="slider">15
<div class="sp" style="background: blue;">1</div>16
<div class="sp" style="background: yellow;">2</div>17
<div class="sp" style="background: green;" >3</div>18
<div class="sp" style="background: red;">4</div>19
</div>20
</div>21
<div id="nav"></div>22
<div id="button-previous">prev</div>23
<div id="button-next">next</div>24
</div>25
</body>26
</html>