ClearInterval does not work in slider

Question

ClearInterval does not work in slider

Navigation

#1 by (1 votes)

0

By clicking on the buttons #slider-but1 , #slider-but2 or slider-but3 to change the image, I want to stop the setInterval called interval and recreate it. That way, by clicking on any image, the correct time will be visible.

The problem is that I'm ignoring the clearInterval , and again run the setInterval , making the image change faster and faster. What is the reason for this?

var interval = setInterval(tiempo, 3500);

function displaySlider1(){
	document.getElementById('slider1').style.visibility="visible";
	document.getElementById('slider1').style.opacity=1;
	document.getElementById('slider1').style.height="100vh";
}

function hideSlider1(){
	document.getElementById('slider1').style.visibility="hiden";
	document.getElementById('slider1').style.opacity=0;
	document.getElementById('slider1').style.height=0;
}

function displaySlider2(){
	document.getElementById('slider2').style.visibility="visible";
	document.getElementById('slider2').style.opacity=1;
	document.getElementById('slider2').style.height="100vh";
}

function hideSlider2(){
	document.getElementById('slider2').style.visibility="hiden";
	document.getElementById('slider2').style.opacity=0;
	document.getElementById('slider2').style.height=0;
}

function displaySlider3(){
	document.getElementById('slider3').style.visibility="visible";
	document.getElementById('slider3').style.opacity=1;
	document.getElementById('slider3').style.height="100vh";
}

function hideSlider3(){
	document.getElementById('slider3').style.visibility="hiden";
	document.getElementById('slider3').style.opacity=0;
	document.getElementById('slider3').style.height=0;
}

function showSlider1(){
	clearInterval(interval)
	hideSlider2();
	hideSlider3();
	displaySlider1();
  var interval = setInterval(tiempo, 3500);
	interval;
}

function showSlider2(){
	clearInterval(interval)
	hideSlider1();
	hideSlider3();
	displaySlider2();
  var interval = setInterval(tiempo, 3500);
	interval;
}

function showSlider3(){
	clearInterval(interval)
	hideSlider1();
	hideSlider2();
	displaySlider3();
  var interval = setInterval(tiempo, 3500);
	interval;
}

function tiempo(){
	if(slider1.style.opacity ==  1){
		showSlider2();
	}else if(slider2.style.opacity ==  1){
		showSlider3();
	}else if(slider3.style.opacity ==  1){
		showSlider1();
	}
}

interval;

.slider{
	position: relative;
}

.slider-buttons-set{
	z-index:1;
	display:flex;
	flex-flow:row nowrap;
	justify-content: space-around;
	align-items: flex-end;
	align-items: flex-end;
    padding: 0 17%;
    height: 100vh;
}

.slider-buttons{
	background-color: #d0e4ed;
	width:30%;
	height:9px;
	border:0 solid transparent;
  cursor:pointer;
}

.slider-img{
    	background-repeat: no-repeat;
    	background-size: cover;
    	background-position: center;
    	background-origin: content-box;
    	width:100%;
    	transition: visibility 0s, opacity 0.5s ease;
    	top:0;
    	position:absolute;
    	right:0;
    	z-index:-1;
    }
    
    #slider1{ background-color:#6bd2db; }
    #slider2{ background-color:#ffc0cb; }
    #slider3{ background-color:#646cdd; }

<div class="slider">
<div class="slider-buttons-set">
    	<button class="slider-buttons" id="slider-but1" onclick="showSlider1()"></button>
    	<button class="slider-buttons" id="slider-but2" onclick="showSlider2()"></button>
    	<button class="slider-buttons" id="slider-but3" onclick="showSlider3()"></button>
    </div>
    
    <div class="slider-img" id="slider1" style="visibility: visible;opacity: 1; height:100vh;"></div>
    
    <div class="slider-img" id="slider2" style="visibility: hidden;opacity: 0;"></div>
    
    <div class="slider-img" id="slider3" style="visibility: hidden;opacity: 0;"></div>
 </div>

javascript

asked by MarisabelGC 13.07.2017 в 17:17

source

1 answer

value of option value is lost when updating Owlcarousel does not respect styles with vue.js

score 1 · Accepted Answer

You should avoid the redeclarations of interval , what happens is to assign a different number to the one that the setinterval assigns

therefore it is better to have a global variable assigned and based on that clean and assign new values of setInterval

var interval = setInterval(tiempo, 3500);

function displaySlider1() {
  document.getElementById('slider1').style.visibility = "visible";
  document.getElementById('slider1').style.opacity = 1;
  document.getElementById('slider1').style.height = "100vh";
}

function hideSlider1() {
  document.getElementById('slider1').style.visibility = "hiden";
  document.getElementById('slider1').style.opacity = 0;
  document.getElementById('slider1').style.height = 0;
}

function displaySlider2() {
  document.getElementById('slider2').style.visibility = "visible";
  document.getElementById('slider2').style.opacity = 1;
  document.getElementById('slider2').style.height = "100vh";
}

function hideSlider2() {
  document.getElementById('slider2').style.visibility = "hiden";
  document.getElementById('slider2').style.opacity = 0;
  document.getElementById('slider2').style.height = 0;
}

function displaySlider3() {
  document.getElementById('slider3').style.visibility = "visible";
  document.getElementById('slider3').style.opacity = 1;
  document.getElementById('slider3').style.height = "100vh";
}

function hideSlider3() {
  document.getElementById('slider3').style.visibility = "hiden";
  document.getElementById('slider3').style.opacity = 0;
  document.getElementById('slider3').style.height = 0;
}

function showSlider1() {
  clearInterval(interval)
  hideSlider2();
  hideSlider3();
  displaySlider1();
  interval = setInterval(tiempo, 3500);
  interval;
}

function showSlider2() {
  clearInterval(interval)
  hideSlider1();
  hideSlider3();
  displaySlider2();
  interval = setInterval(tiempo, 3500);
  interval;
}

function showSlider3() {
  clearInterval(interval)
  hideSlider1();
  hideSlider2();
  displaySlider3();
  interval = setInterval(tiempo, 3500);
  interval;
}

function tiempo() {
  if (slider1.style.opacity == 1) {
    showSlider2();
  } else if (slider2.style.opacity == 1) {
    showSlider3();
  } else if (slider3.style.opacity == 1) {
    showSlider1();
  }
}

interval;

.slider {
  position: relative;
}

.slider-buttons-set {
  z-index: 1;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-around;
  align-items: flex-end;
  align-items: flex-end;
  padding: 0 17%;
  height: 100vh;
}

.slider-buttons {
  background-color: #d0e4ed;
  width: 30%;
  height: 9px;
  border: 0 solid transparent;
  cursor: pointer;
}

.slider-img {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-origin: content-box;
  width: 100%;
  transition: visibility 0s, opacity 0.5s ease;
  top: 0;
  position: absolute;
  right: 0;
  z-index: -1;
}

#slider1 {
  background-color: #6bd2db;
}

#slider2 {
  background-color: #ffc0cb;
}

#slider3 {
  background-color: #646cdd;
}

<div class="slider">
  <div class="slider-buttons-set">
    <button class="slider-buttons" id="slider-but1" onclick="showSlider1()"></button>
    <button class="slider-buttons" id="slider-but2" onclick="showSlider2()"></button>
    <button class="slider-buttons" id="slider-but3" onclick="showSlider3()"></button>
  </div>

  <div class="slider-img" id="slider1" style="visibility: visible;opacity: 1; height:100vh;"></div>

  <div class="slider-img" id="slider2" style="visibility: hidden;opacity: 0;"></div>

  <div class="slider-img" id="slider3" style="visibility: hidden;opacity: 0;"></div>
</div>