My jquery slider refresh rate won't update live

I am trying to develop a simple jquery slider, the slier switches between images and text each three seconds by default (var segundos = 3;), the slider has a button which acts as a play/pause action and a menu option which lets you increase or decrease the ammoun of seconds it will switch between images each time. This is done via the classes .resta and .suma(decrease and decrease).

Now, the slider works good but there is a problem, when the segundos variable (segundos means seconds) changes the effect don't take action unless the slider is paused, it won't automatically refresh while theslider is running. It has to go like this: pause slider > change default seconds > play slider > see results

My objective is to make it so it changes the refresh rate while the slider is up and running.

Here is the code:

<script>
$(document).ready(function(){
    var segundos = 3000;
    var stop = true;
    var slideInterval;

	
	$('.play').click(function(){
    if (stop == false) {
    stop = true;
	$('#playpause').text('Play it');
    clearInterval(slideInterval);
    }
    else {
    stop = false;
	$('#playpause').text('Pause it');
    slideInterval = setInterval(swapSlides, segundos);
    }
    });
	
	
    function swapSlides(){
	//var cs = $('div.currentslide:first');
	var cs = $('#polaroid1').children('.currentslide:first');
	var ns = cs.next();
	if(ns.hasClass('mySlides1')){
	cs.removeClass('currentslide');
	ns.addClass('currentslide');
    }
	else{
	ns = $('#polaroid1').children('div.mySlides1:first');
	cs.removeClass('currentslide');
	ns.addClass('currentslide');
	}
	}
	
	
    $('.resta').click(function(){
    if(segundos > 1000){
    segundos = segundos - 1000;
	segundoss = (segundos/1000);
    $('.segundos').text(" " + segundoss + "s ");
    }
    });

    $('.suma').click(function(){
    if(segundos >= 1000 && segundos < 15000){
    segundos = segundos + 1000;
	segundoss = (segundos/1000);
    $('.segundos').text(" " + segundoss + "s ");
    }
    });
	
});
</script>
.menu{
	list-style:none; 
	bottom:8px; 
	position:absolute; 
	font-family: 'Covered By Your Grace', cursive; 
	font-weight:300; 
	width:200px;
}

.menu > li{
	
}

.play{
	width:59px;
	height:52px;
	position:absolute; 
	left:5px; 
	bottom:5px; 
	cursor:pointer; 
	z-index:10000;
}

.polaroid1{
	box-shadow: 10px 10px 7px -7px rgba(0, 0, 0, 0.5); 
	-webkit-backface-visibility: hidden; 
	transform: rotate(-8deg); 
	margin-bottom:30px; 
	width:380px; 
	height:320px; 
	background-color:rgba(255, 255, 255, 1.0); 
	text-align:right; 
	padding-top:10px; 
	padding-right:10px; 
	padding-left:10px; 
	padding-bottom:15px; 
	top:15px; 
	left:25px; 
	position:relative;
}

.photo1{
	width:100%;  
	height:85%; 
	position:relative;
	padding:5px;
}

.date1{
	margin:0; 
	padding-right:10px; 
	font-family: 'Covered By Your Grace', cursive; 
	transform: rotate(-5deg);
	font-size:28px;
}

.mySlides1{
	display:none;
	width:380px; 
	height:320px; 
	position:absolute; 
	top:0px; 
	left:0px;
}

.currentslide{display:block;}
<ul class="menu hide">
	<li style="font-size:22px; margin-top:8px;">Diapositivas:  <span class="resta" style="cursor:pointer;">< </span><span class="segundos">3s</span><span class="suma" style="cursor:pointer;"> ></span></li>
  </ul>
</div>
<div id="polaroid1" class="polaroid1">
  <div class="tooltip2 play" style="background-image: url('images/heart2.png');"><span id="playpause" class="tooltiptext2">Play it</span></div>
  <div class="mySlides1 fade currentslide">
    <img class="photo1" src="images/IMG-20170610-WA0028.jpg">
    <h3 class="date1">22-05-2017</h3>
  </div>
  <div class="mySlides1 fade">
    <img class="photo1" src="images/20170812_181516.jpg">
    <h3 class="date1">12-08-2017</h3>
  </div>
  <div class="mySlides1 fade">
    <img class="photo1" src="images/20170522_112958.jpg">
    <h3 class="date1">22-05-2017</h3>
  </div>
  <div class="mySlides1 fade">
    <img class="photo1" src="images/IMG-20170610-WA0017.jpg">
    <h3 class="date1">10-06-2017</h3>
  </div>
  <div class="mySlides1 fade">
    <img class="photo1" src="images/20170819_194526.jpg">
    <h3 class="date1">19-08-2017</h3>
  </div>
  <div class="mySlides1 fade">
    <img class="photo1" src="images/20170811_182103.jpg">
    <h3 class="date1">11-08-2017</h3>
  </div>
  <div class="mySlides1 fade">
    <img class="photo1" src="images/20170522_124602.jpg">
    <h3 class="date1">22-05-2017</h3>
  </div>
  <div class="mySlides1 fade">
    <img class="photo1" src="images/20170419_020725.jpg">
    <h3 class="date1">19-04-2017</h3>
  </div>
  <div class="mySlides1 fade">
    <img class="photo1" src="images/20170520_115819.jpg">
    <h3 class="date1">20-05-2017</h3>
  </div>
  <div class="mySlides1 fade">
    <img class="photo1" src="images/20170822_011703.jpg">
    <h3 class="date1">22-08-2017</h3>
  </div>
  <div class="mySlides1 fade">
    <img class="photo1" src="images/20170705_184344.jpg">
    <h3 class="date1">05-07-2017</h3>
  </div>
</div>

Answers:

Answer

It has to go like this: pause slider > change default seconds > play slider > see results

My objective is to make it so it changes the refresh rate while the slider is up and running.

That's because you never do anything to your slideInterval when you increase/decrease the slide interval time (segundos).

Solution:

Add function to restart your slideInterval like so:

 function _restartSlide() {     
      clearInterval(slideInterval);
      slideInterval = setInterval(swapSlides, segundos);   
 } 

jsfiddle link https://jsfiddle.net/sudarpochong/2za1ccra/1/

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.