I have a problem with this slideshow

Asked

Viewed 18 times

1

I’ve been trying to find the problem with you for a long time (note: I’m new to this area), it turns out that when the background changes the image, in a short interval it’s like a flash, and as I changed from jquery to css, because I wasn’t able to smooth the slider effect, This flash is pissing me off. And the interesting thing that only happens in the first loop, then it continues to exchange images normally. Anyway here is the code, I hope you help me. 

.body{
    overflow-x: hidden;
    background-image: url("imagens/fundo.png");
    background-repeat: no-repeat;
    background-size: cover;
    animation: linear;
    animation-name: body;
    animation-duration: 30s;
    animation-iteration-count: infinite; 
    animation-delay: .1s;
}`
`@keyframes body{
    0%  {background-image: url("imagens/slide.jpg"); background-size: 100% 100%;}   
    20%  {background-image: url("imagens/slide1.jpg"); background-size: 100% 100%;}
    40%  {background-image: url("imagens/slide2.jpg"); background-size: 100% 100%;}
    60%  {background-image: url("imagens/slide3.jpg"); background-size: 100% 100%;}
    80%  {background-image: url("imagens/slide4.jpg"); background-size: 100% 100%;}
    100%{background-image: url("imagens/slide5.jpg"); background-size: 100% 100%;}
    }
css background slideshow

1 answer

1

It turns out that the images are being downloaded at the moment when the CSS changes the frame. Add this code to the page just to ensure that the images are already loaded and thus avoid that when changing via css, there is this small flash.

<div class="pre-load-images" style="display:none">
  <img src="imagens/slide.jpg" alt="">
  <img src="imagens/slide1.jpg" alt="">
  <img src="imagens/slide2.jpg" alt="">
  <img src="imagens/slide3.jpg" alt="">
  <img src="imagens/slide4.jpg" alt="">
  <img src="imagens/slide5.jpg" alt="">
</div>

Browser other questions tagged css background slideshow

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