1

Eu fiz um slideshow de raiz com Jquery usando setInterval para mudar os slides passados alguns segundos. Ele funciona bem, no entanto, se eu mudar de separador e passado algum tempo voltar, a animação fica "bugada" e passa os slides muito rápido.

Aqui está o site. O slide inicial é o primeiro de fundo que se vê.

Código do Slideshow

<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);
4
  • Se não conseguir resolver me fala. Da para fazer esse mesmo Slide apenas com CSS, não precisa de JS para conseguir esse mesmo efeito... Se quiser posso fazer um exemplo pra vc
    – hugocsl
    3/04/2018 às 18:16
  • @hugocsl Eu sei que é possível mas eu como programador iniciante fiz esse sem ajuda e senti-me concretizado por ele funcionar exceto este probleminha 3/04/2018 às 18:20
  • Legal jovem o resultado ficou 99%, só um usuário que ficar parado ali um bom tempo é que vai ver isso rss. De qq forma já já alguém te responde, infelizmente de JS não entendo nada...
    – hugocsl
    3/04/2018 às 18:22
  • Mas se puder então dar um exemplo em css ficaria muito agradecido 3/04/2018 às 18:28

1 Resposta 1

0

Conforme dito no comentário vou apenas postar uma resposta com CSS caso vc não queira usar o JS para resolver o problema.

Não mexi no HTML, apenes ajustei algumas linhas do CSS e fiz um @kayframes para fazer a animação.

Veja como fica

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>

4
  • Visite este link. O slideshow fica um pouco bugado ainda 4/04/2018 às 15:36
  • Eu vi lá no link vc está usando o JS e o CSS que eu fiz juntos?? O modelo que eu fiz não precisa usar o seu JS ele é todo em CSS, parece que vc ainda está chamando o seu JS que está interagindo com os estilos do CSS ai fica buggado mesmo. Vc tem que remover esse JS e usar apenas o Slider com o CSS conforme o exemplo acima. Ou então deixa apenas como o JS do jeito que estava. Usar os dois juntos não vai dar certo. Eu mantive o mesmo nome das suas classes originai. Ta parecendo conflito de CSS com classes com mesmo nome e estilos diferentes. Faz um teste copiando só o Slide com CSS em outro html
    – hugocsl
    4/04/2018 às 16:04
  • Tem razão, eu sou um pouco lerdo às vezes. Apaguei o js e funciona corretamente. 4/04/2018 às 16:06
  • LOL! imaginei rss tmj
    – hugocsl
    4/04/2018 às 16:07

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .