When clicking on the #slider-but1
, #slider-but2
or buttons slider-but3
for the image to change, I want it to stop the setInterval called interval
and recreate it. That way, when you click on an image, the correct time will be visible.
The problem is that it is ignoring me clearInterval
, and runs again setInterval
, making the change of images go faster each time. What is this about?
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>
You should avoid redeclarations of
interval
, what happens is assigning a different number to the one hesetinterval
assignstherefore it is better to have a global variable assigned and based on that clean and assign the new values of the
setInterval