Falha ao final do slide show

[Carcleo 4]

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>

[leosbotelho 1]

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?

[Carcleo 4]

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

[leosbotelho 1]

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

 

[Carcleo 4]

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!

[leosbotelho 1]

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.

[Carcleo 4]

por favor, dê uma olhada onde estou errando. Todos os códigos estão em uma só página. Pois não está dando certo de jeito algum!

 

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

[leosbotelho 1]

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.

[Carcleo 4]

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