Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Carcleo

Falha ao final do slide show

Por , em Javascript

Recommended Posts

Carcleo    4

Carcleo
Postado

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>

Compartilhar este post

Link para o post
Compartilhar em outros sites

leosbotelho    1

leosbotelho
Postado

https://api.jquery.com/next/

 

O sibling imediato/mais próximo do último elemento da div do slider é o <nav>...</nav>, no seu código.Veja: 

<div class="slider">

 <div class="slide fade ativa">
   <img  src="http://funerariasaopedro.net.br/novo/_img/_banner/_site/bg_1.jpg" />
   <span>Este é 1</span>
 </div>
 
 <div class="slide fade">
   <img  src="http://funerariasaopedro.net.br/novo/_img/_banner/_site/bg_2.jpg" />
   <span>Este é 2</span>
 </div>

 <nav>
  <button class="anterior">Anterior</button>
  <button class="proximo">Próximo</button>
 </nav>

</div>
ativa = $("div.slider > div.ativa")
//suponha ativa = div "Este é o 2"
//então, $(ativa).next() aponta pra nav, o ultimo elemento

if (!$(ativa).next().length) { //tem proximo elemento (a nav), nao cai aqui
  ativa = blocos[0]
}

$(ativa)
  .removeClass("ativa") //desativa slide atual
  .next() //nav
  .addClass("ativa")

Entendeu?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Carcleo    4

Carcleo
Postado

A tua lógica entendi sim. Mas o problema ainda continua. Ou seja. ainda continua exibindo uma terceira tela. só que sem figura. Isto é, está chegando na NAV do mesmo jeito!

 

O que estou querendo é filtrar apenas nas divs.slide

Compartilhar este post

Link para o post
Compartilhar em outros sites

leosbotelho    1

leosbotelho
Postado

Danoninho:

 

Deixa só "os slides" no elemento do slider (coloca a nav em outro nodo pra esse fim).

Ou muda seu seletor pra filtrar só os slides, i.e:  

.slider > .slide.ativa
ou
.slider .slide.ativa

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Carcleo    4

Carcleo
Postado

Do jeito abaixo até funcionou. 

$(document).ready(function(e) {

  const blocos = $("div.slider div.slide");
  
  function startslider(dir) {
      
        ativa = $(".slider .slide.ativa")
        //suponha ativa = div "Este é o 2"
        //então, $(ativa).next() aponta pra nav, o ultimo elemento
        
        if (!$(ativa).next().length) { //tem proximo elemento (a nav), nao cai aqui
          ativa = blocos[0]
        }
        
        $(ativa)
          .removeClass("ativa") //desativa slide atual
          .next() //nav
          .addClass("ativa")
                    
        setTimeout(startslider, 2000);
            
  }
  
  setTimeout(startslider, 2000);
    
});

No entanto, mesmo chamando a função novamente fora do seu bloco, o carro vai até o final das divs mas não volta ao começo!

Compartilhar este post

Link para o post
Compartilhar em outros sites

leosbotelho    1

leosbotelho
Postado

Por causa do condicional:  

if(!$(ativa).next().length) {
  //...
}

Se você manteve a nav, isso vai ser verdadeiro quando ativa = ultimo slide.

Tem que refatorar.Uma possibilidade é usar um seletor de "slides" ali no next: 

if(!$(ativa).next('.slide').length) {
  //...
}

Fora isso, seria melhor usar só o DOM (e.g, sem a váriavel blocos) pro "controle das manipulações" ou compartimentalizar isso melhor.

Compartilhar este post

Link para o post
Compartilhar em outros sites

leosbotelho    1

leosbotelho
Postado

Era só checar o "console": 

setTimeout(startslider(), 2000);

Tá chamando startslider recursivamente/infinitamente, o correto é passar uma referência da função (i.e "f" (referencia) vs f() (chamada de função)).

Erros assim, é melhor você lidar e estudar, revisar o material/fundamentos quando necessário.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Carcleo    4

Carcleo
Postado

sim mas a minha dúvida ainda continua. veja:

O detalhe é:
1) Abrir a página e, pelos próprios, HTML e CSS, abrir de imediato o primeiro slide
2 ) Chamar a função e começar a verificação

3) Achar o próximo elemento da div lider.

4) Preciso retirar da div slide a NAV via código. Isso está sendo mais dificil.

 

Por favor dê mais olhada no linlk que eu retirei o NAV mesmo assim continua não dando certo.

 

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

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript

  • Conteúdo Similar

    • ILR master
      Carregamento preloading
      Por ILR master
      Fala pessoal, tudo bem?
       
      Tô tentando fazer um pre-loading, mas não consigo de jeito algum.
      Quero mostrar uma animação enquanto a página é carregada e depois de caregada, esconder a animação e mostrar conteúdo.
       
      Aguém pode me ajudar?
       
      Segue código abaixo
       
       
      <!DOCTYPE html>
      <html lang="pt-br">
      <head>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />  
          <title>PÁGINA LOAD</title>

      <style type="text/css">
      .loadclass {
          border: 2px solid #f3f3f3; /* Light grey */
          border-top: 4px solid #ffc401; /* Blue */
          border-radius: 50%;
          width: 50px;
          height: 50px;
          animation: spin 2s linear infinite;
      }
      @keyframes spin {
          0% { transform: rotate(0deg); }
          100% { transform: rotate(360deg); }
      }
      .conteudo {
          display:none;
      }
      </style>
      <script>
          function loading(){
              document.getElementsByClassName('loadclass')[0].style.display="none";
              document.getElementsByClassName('conteudo').style.display="block";
          }
      </script>
      </head>
      <body onLoad="loading()">
      <div class="loadclass"></div>
      <div class="conteudo">SEU CONTEUDO AQUI DENTRO!!!</div>
      </body>
      </html>
    • ILR master
      Abrir url na mesma janela
      Por ILR master
      Pessoal, pergunta bem simples. Abaixo tenho o seguinte código:
       
      <script>
      function alerta()
      {
        if (window.confirm("Você realmente quer sair?")) {
          window.open("sair.html");
      }
      }
      </script>
       
      Funciona perfeitamente, só que está abrindo em outra janela e quero que abra na mesma janela.
       
      Alguém pode me ajudar?
    • Giovanird
      Atualizar pagina PHP que esta dentro de uma div
      Por Giovanird
      Olá a todos!
      Tenho uma pagina que possui uma DIV onde coloquei uma pagina PHP.
      Uso a função setInterval para atualizar a pagina inclusa dentro da DIV.
      O problema é que ao acessar o site , a DIV só me mostra a pagina inclusa somente quando completo o primeiro minuto.
      Preciso que a pagina inclusa já inicie carregada
       
      Meu código JavaScript e a DIV com a pagina PHP
       
      <script> function atualiza(){ var url = 'direita.php'; $.get(url, function(dataReturn) { $('#direita').html(dataReturn); }); } setInterval("atualiza()",60000); </script> <div> <span id="direita"></span> </div>  
    • Thiago Duarte
      Drag and Drop para arrastar imagem
      Por Thiago Duarte
      Oi, gostaria de arrastar imagem e ao soltar formar bloco html, meu bloco de html ficaria com nome, content-1.html, content-2.html, etc
       
      Alguem pode me ajudar?
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito