Here is a simple jQuery Slider, and I am going to start it by clicking on Play Button throught setting up interval = setInterval(updateDiv,1000); Interval to change slides in every 1 second, and i am clearing Interval (Pause Slider) by clearInterval(interval); through Pause Button.
But the problem is I am facing that if user clicked multiple time on play button then slider animation goes crazy in changing slides and after that also clearInterval(interval); function not working. Why ?
Can i know the solution.
MY WHOLE CODE IS:
var interval;
var interval = false;
$("#slideshow > div:gt(0)").hide();
function updateDiv() {
$('#slideshow > div:first')
.fadeOut(600)
.next()
.fadeIn(400)
.end()
.appendTo('#slideshow');
}
$(".play").click(function() {
interval = setInterval(updateDiv, 1000);
});
$(".pause").click(function() {
clearInterval(interval);
});#slideshow {
margin: 80px auto;
position: relative;
width: 240px;
height: 240px;
padding: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
}
#slideshow>div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
#slideshow2 {
margin: 80px auto;
position: relative;
width: 240px;
height: 240px;
padding: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
margin-left: 200px;
}
#slideshow2>div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
------
<button class="play">play</button>
<button class="pause">pause</button> -------
<div id="slideshow">
<div>
<img src="http://farm6.static.flickr.com/5224/5658667829_2bb7d42a9c_m.jpg">
</div>
<div>
<img src="http://farm6.static.flickr.com/5230/5638093881_a791e4f819_m.jpg">
</div>
<div>
Pretty cool eh? This slide is proof the content can be anything.
</div>
</div>Every time the user clicks on ".play" another setInterval is created, and the interval variable only contains the last one. So, if there's already an interval going on you need either to clear it or to prevent the user to start again.
This is a working solution:
var interval;
var interval = false;
$("#slideshow > div:gt(0)").hide();
function updateDiv() {
$('#slideshow > div:first')
.fadeOut(600)
.next()
.fadeIn(400)
.end()
.appendTo('#slideshow');
}
$(".play").click(function() {
if(!interval){
interval = setInterval(updateDiv, 1000);
}
});
$(".pause").click(function() {
clearInterval(interval);
interval = false;
});#slideshow {
margin: 80px auto;
position: relative;
width: 240px;
height: 240px;
padding: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
}
#slideshow>div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
#slideshow2 {
margin: 80px auto;
position: relative;
width: 240px;
height: 240px;
padding: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
margin-left: 200px;
}
#slideshow2>div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
------
<button class="play">play</button>
<button class="pause">pause</button> -------
<div id="slideshow">
<div>
<img src="http://farm6.static.flickr.com/5224/5658667829_2bb7d42a9c_m.jpg">
</div>
<div>
<img src="http://farm6.static.flickr.com/5230/5638093881_a791e4f819_m.jpg">
</div>
<div>
Pretty cool eh? This slide is proof the content can be anything.
</div>
</div>