Jump to content

Recommended Posts

Posted

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

* {
	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);
}

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>
Posted

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.)

Posted

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.
 

Posted
$(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();
    });
});

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.