"Bug" in the slideshow if you stay too long off the tab

Navigation
1

I made a slideshow with Jquery using setInterval to change the slides after a few seconds. It works fine, however, if I change tabs and spend some time back, the animation gets "bugged" and passes the slides very fast.

Here is the website . The opening slide is the first slide you see.

Slideshow Code 

<div class="slideshow">

  <img src="images/152156263613548.jpg" class="slide slide1 active_slide" data-slide="1">
  <img src="images/capaaaa.jpg" class="slide slide2" data-slide="2">
  <img src="images/casa_das_artes.jpg" class="slide slide3" data-slide="3">
</div>

setInterval(function(){
        var slide = $(".active_slide").attr("data-slide");
        var next = parseInt(slide)+1;
        if($(".slide"+next).length > 0){
            $(".slide"+slide).removeClass("active_slide");
            $(".slide"+slide).fadeOut(1000);
            $(".slide"+next).addClass("active_slide");
            $(".slide"+next).fadeIn(700).css("display","block");;
        }else{
            $(".slide"+slide).removeClass("active_slide");
            $(".slide"+slide).fadeOut(1000);
            $(".slide1").addClass("active_slide");
            $(".slide1").fadeIn(700).css("display","block");;
        }
},4000);
    
asked by anonymous 03.04.2018 / 20:02

1 answer

0

As I said in the comment I will only post a response with CSS if you do not want to use JS to solve the problem.

I did not move in HTML, apenes adjusted some CSS lines and made a @kayframes to do the animation.

See how it goes 

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.slideshow {
  width: 100%;
  margin: 0 auto;
  text-align: center;
  height: 100%;
  overflow: hidden;
  position: relative;
  z-index: 101;
}
.slideshow::after {
  content: "";
  position: absolute;
  z-index: 202;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0,0,0,.5);
}
.slide {
  opacity: 0;
  display: block;
  width: 100%;
  position: absolute;
  animation: galeria 9s infinite;
}
.slide:nth-child(1){
 
}
.slide:nth-child(2){
  animation-delay: 3s;
  -webkit-animation-delay: 3s;
}
.slide:nth-child(3){
  animation-delay: 6s;
  -webkit-animation-delay: 6s;
}
@keyframes galeria {
  33.33% {
    opacity: 1;
  }
  66.66% {
    opacity: 0;
  }
}
<div class="slideshow">
  <img src="https://www.pedrooculista.pt/new/images/152156263613548.jpg"class="slide slide1 active_slide" data-slide="1">
  <img src="https://www.pedrooculista.pt/new/images/capaaaa.jpg"class="slide slide2" data-slide="2">
  <img src="https://www.pedrooculista.pt/new/images/casa_das_artes.jpg"class="slide slide3" data-slide="3">
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, excepturi! Mollitia nihil libero maiores totam fugit dolor, ex deleniti doloribus?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, excepturi! Mollitia nihil libero maiores totam fugit dolor, ex deleniti doloribus?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, excepturi! Mollitia nihil libero maiores totam fugit dolor, ex deleniti doloribus?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, excepturi! Mollitia nihil libero maiores totam fugit dolor, ex deleniti doloribus?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, excepturi! Mollitia nihil libero maiores totam fugit dolor, ex deleniti doloribus?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, excepturi! Mollitia nihil libero maiores totam fugit dolor, ex deleniti doloribus?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, excepturi! Mollitia nihil libero maiores totam fugit dolor, ex deleniti doloribus?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, excepturi! Mollitia nihil libero maiores totam fugit dolor, ex deleniti doloribus?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, excepturi! Mollitia nihil libero maiores totam fugit dolor, ex deleniti doloribus?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, excepturi! Mollitia nihil libero maiores totam fugit dolor, ex deleniti doloribus?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, excepturi! Mollitia nihil libero maiores totam fugit dolor, ex deleniti doloribus?</p>
    
03.04.2018 / 21:06
Align to center Get first row and first column gridview JavaScript