Jump to content
Carlos Rocha

Falha ao final do slide show

Recommended Posts

Carlos Rocha

Estou tentando fazer um slide show personalizado para fins de aprendizagem. Avancei bastante já.

Porém estou tendo um erro do qual não estou conseguindo me livrar.

O slide corre bem, mas quando chega na ultima imagem, ele acha uma imagem em branco e bota ela no lugar em que deveria ser exibida a primeira imagem novamente.

Cada imagem do slide tem uma legenda feito com um label e ambos dentro de uma div. 

O link abaixo mostra o slide em funcionamento.

http://funerariasaopedro.net.br/novo/index6.php

Vou postar abaixo o código completo.

Se alguém puder me ajudar desde já agradeço.

CSS

<style>
* {
	margin: 0;
	padding: 0;
}
.fade {
	-webkit-animation-name: fade;
	-webkit-animation-duration: 1.5s;
	animation-name: fade;
	animation-duration: 1.5s;
}
div.slider {
	overflow: hidden;
	position: relative;
	width: 100vw;
	height: 300px;
}
div.slider:hover {
	animation-play-state: paused;
}
div.slider > div.slide {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
}
div.slider div.slide img {
	width: 100%;
}
div.slider div.ativa {
	display: block;
}
div.slider div.ativa img {
	animation: slider 1s linear;
	animation-fill-mode: forwards;
}
div.slider div.ativa img:hover {
	-moz-transition: all 0.3s;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}
 @keyframes slider {
 0% {
 transform: scale(1);
}
 100% {
 transform: scale(1.1);
}
}
 @-webkit-keyframes fade {
 from {
opacity: .4
}
 to {
opacity: 1
}
}
 @keyframes fade {
 from {
opacity: .4
}
 to {
opacity: 1
}
}
div.slider div.slide span {
	position: absolute;
	width: 100%;
	line-height: 40px;
	bottom: 0;
	z-index: 500;
	color: rgb(255,255,255);
	text-align: center;
}
div.slider nav {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 40px;
	background-color: rgb(0, 0, 0, .5);
	z-index: 400;
	text-align: center;
}
div.slider nav button.anterior, div.slider nav button.proximo {
	position: absolute;
	width: 100px;
	height: 40px;
	text-align: center;
}
div.slider nav button.anterior {
	left: 10%;
}
div.slider nav button.proximo {
	right: 10%;
}
div.slider nav button.proximo label {
	top: calc(50%-20px);
}
</style>

JAVASCRIT

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(e) {
	
//$("div.slider").height($("div.slider div.slide").height())

const blocos = $("div.slider div.slide");

function startslider() {  

  ativa = $("div.slider div.ativa")
  
  if (!$(ativa).next().length) {
    ativa = blocos[0]
  }
  
   $(ativa)
	  .removeClass("ativa")
	  .next()
	  .addClass("ativa")
  
   setTimeout(startslider, 5000)
}

setTimeout(startslider, 5000)

$("nav button.anterior").click(function(){

  prev = $("div.slider div.ativa").prev();  
 // alert (blocos.length);
  prev = prev.length ? prev : blocos[ blocos.length - 1 ];  
  mostraBloco(prev);
  
})

$("nav button.proximo").click(function(){
	
  next = $("div.slider div.ativa").next();    
  next = next.length ? next : blocos[0];    
  mostraBloco(next);
  
})

/* Função para exibir as imagens */
function mostraBloco(next) {
	
  ativa = $("div.slider div.ativa")
  
  $(ativa).removeClass("ativa")
  $(next).addClass("ativa")
  
}
});
</script>

HTML

<div class="slider">
  <div class="slide fade ativa"> <img  src="_img/_banner/_site/bg_1.jpg" /> <span>Este é 1</span> </div>
  <div class="slide fade"> <img  src="_img/_banner/_site/bg_2.jpg" /> <span>Este é 2</span> </div>
  <div class="slide fade"> <img  src="_img/_banner/_site/bg_3.jpg" /> <span>Este é 3</span> </div>
  <nav>
  <button class="anterior">Anterior</button>
  <button class="proximo">Próximo</button>
  </nav>
</div>

 

Share this post


Link to post
Share on other sites
Rui Carlos

O teu problema é que estás a iterar por todos elementos incluídos na div slider: 3 divs que têm imagens e o elemento nav seguinte.

Uma forma simples de resolveres o problema e não colocares o nav dentro da div slider.

(Já agora, usando as developer tools do browser, com um breakpoint na função Javascript que te faz a troca de imagens, rapidamente conseguias descobrir qual o problema.)

Share this post


Link to post
Share on other sites
Carlos Rocha

Sim, mas quando eu faço:

const blocos = $("div.slider div.slide");

Eu não estaria iterando apenas sobre as divs.slide que existem dentro da div.slider?

Share this post


Link to post
Share on other sites
Rui Carlos

O problema está aqui:

  if (!$(ativa).next().length) {
    ativa = blocos[0]
  }

  $(ativa)
	  .removeClass("ativa")
	  .next()
	  .addClass("ativa")

Mais precisamente na utilização do next(), que nada impede de devolver o nav.

Share this post


Link to post
Share on other sites
Carlos Rocha

Entendi!

Mas o correto seria:

const blocos = $("div.slider > div.slide");

ao invés de 

const blocos = $("div.slider  div.slide");

Dessa forma eu elimino tudo que não for div.slide

Deu certo aqui agora.

Muito obrigado.
 

Share this post


Link to post
Share on other sites
bioshock
$(document).ready(function(e) 
{
    var current = 0;
    
    function slider()
    {
        $('div.slide').removeClass('ativa');
        $('div.slide').eq(current).addClass('ativa');
    }
    
    $('nav button.anterior').click(function()
    {
        if(current == 0)
            return;
            
        current--;
        
        slider();
    });
    
    $('nav button.proximo').click(function()
    {
        if(current >= $('div.slider div.slide').length - 1)
            return;
            
        current++;
        
        slider();
    });
});

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.