"Bug" in slideshow if staying too long outside the tab

Asked

Viewed 93 times

1

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

Here is the website. The initial slide is the first background 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);
jquery

  • If you can’t solve speak to me. Da to make this same Slide only with CSS, you don’t need JS to achieve that same effect... If you want I can make an example for you

  • @hugocsl I know it’s possible but as a beginner programmer I did this without help and felt concretized by it working except for this little problem

  • Cool young the result was 99%, only a user who stand there a long time is going to see this rss. However already someone already answers you, unfortunately JS do not understand anything...

  • But if you can then give an example in css I would be very grateful

1 answer

0

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

I didn’t touch HTML, I just tweaked a few lines of CSS and made a @kayframes to do the animation.

See how it looks

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>

  • Visit this link. The slideshow gets a little buggy yet

  • I saw there on the link you are using the JS and the CSS I did together?? The template I made does not need to use your JS it is all in CSS, it seems that vc is still calling your JS that is interacting with the styles of CSS ai gets bugged even. You have to remove this JS and only use Slider with CSS as the example above. Or just leave it as JS as it was. Using the two together will not work. I kept the same name of your classes originated. It looks like CSS conflict with classes with the same name and different styles. Make a test by copying only Slide with CSS in another html

  • You’re right, I’m a little slow sometimes. I deleted js and it works correctly.

  • LOL! I imagined rss tmj

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.