0

Meu objetivo é pegar uma UL com suas Lis e mostrar uma a uma. Mas não todas de uma vez.

De forma que, mostrada a primeira, lanço display:none nela e jogo display:block na próxima exibindo-a.

Mas pelo meu código a próxima NÃO está sendo exibida.

Onde estará o erro?

window.onload = function() {

  const lis = document.getElementsByClassName('slider').item(0).getElementsByTagName('li');

  function slider() {

    for (i = 0; i < lis.length; i++) {

      lis[i].classList.remove('ativa');

      if (i + 1 < lis.length) {

        lis[i + 1].className = 'ativa'

      }

    }
  }

  setTimeout(slider, 3000)

}
* {
  margin: 0;
  padding: 0;
  border: none;
  outline: 0;
}

body {
  width: 100vw;
}

ul {
  list-style: none;
}

div.slider {
  position: relative;
  width: 100%;
  overflow: hidden;
}

div.slider ul.slide {}

div.slider ul.slide li {
  display: none;
}

.ativa {
  display: block !important;
}

div.slider ul.slide li img {
  position: relative;
  width: 100%;
}

div.slider ul.slide li span {
  position: absolute;
  width: 100%;
  line-height: 40px;
  bottom: 0;
  text-align: center;
  color: rgb(255, 255, 255);
  z-index: 1;
}

div.slider nav {
  position: absolute;
  width: 100%;
  height: 40px;
  bottom: 0;
  background-color: rgba(0, 0, 0, .5);
  z-index: 2;
}

div.slider nav button {
  position: absolute;
  width: 150px;
  height: 100%;
  cursor: pointer;
}

div.slider nav button.anterior {
  left: 10%;
}

div.slider nav button.proximo {
  right: 10%;
}
<div class="slider">
  <ul class="slide">
     <li class="ativa">
        <img class="fade" src="http://funerariasaopedro.net.br/novo/_img/_banner/_site/bg_1.jpg" />
        <span>Este é 1</span>
     </li>
     <li>
        <img class="fade" src="http://funerariasaopedro.net.br/novo/_img/_banner/_site/bg_2.jpg" />
        <span>Este é 2</span>
     </li>
  </ul>
  <nav>
  <button class="anterior">Anterior</button>
  <button class="proximo">Próximo</button>
  </nav>
</div>

Segue o link online

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

Obs.: Não gostaria de usar jQuery

em tempo: As li's ficam no css com display:none exatamente para colocar display:block apenas na que deve aparecer

1 Resposta 1

1

O detalhe está na sua validação do índice, pois caso não exista um próximo mas o item atual for o último você apenas remove a classe ativa sem adicionar nenhuma. E também estava chamando a função slider() apenas uma vez.

Fiz algumas alterações no seu script e adicionei um tratamento para quando chegar ao final da lista de <li>, exiba novamente o primeiro item.

window.onload = function() {
  var indexAtiva = 0;
  const lis = document.getElementsByClassName('slider').item(0).getElementsByTagName('li');

  function slider() {

    for (i = 0; i < lis.length; i++) {

      if (i != indexAtiva) {
        lis[i].classList.remove('ativa');
      } else {
        lis[i].className = 'ativa'
      }
    }

    if ((indexAtiva + 1) == lis.length) {
      indexAtiva = 0;
    } else {
      indexAtiva++;
    }

    setTimeout(slider, 3000);

  }

  slider();

}
* {
  margin: 0;
  padding: 0;
  border: none;
  outline: 0;
}

body {
  width: 100vw;
}

ul {
  list-style: none;
}

div.slider {
  position: relative;
  width: 100%;
  overflow: hidden;
}

div.slider ul.slide {}

div.slider ul.slide li {
  display: none;
}

.ativa {
  display: block !important;
}

div.slider ul.slide li img {
  position: relative;
  width: 100%;
}

div.slider ul.slide li span {
  position: absolute;
  width: 100%;
  line-height: 40px;
  bottom: 0;
  text-align: center;
  color: rgb(255, 255, 255);
  z-index: 1;
}

div.slider nav {
  position: absolute;
  width: 100%;
  height: 40px;
  bottom: 0;
  background-color: rgba(0, 0, 0, .5);
  z-index: 2;
}

div.slider nav button {
  position: absolute;
  width: 150px;
  height: 100%;
  cursor: pointer;
}

div.slider nav button.anterior {
  left: 10%;
}

div.slider nav button.proximo {
  right: 10%;
}
<div class="slider">
  <ul class="slide">
    <li class="ativa">
      <img class="fade" src="http://funerariasaopedro.net.br/novo/_img/_banner/_site/bg_1.jpg" />
      <span>Este é 1</span>
    </li>
    <li>
      <img class="fade" src="http://funerariasaopedro.net.br/novo/_img/_banner/_site/bg_2.jpg" />
      <span>Este é 2</span>
    </li>
  </ul>
</div>

6
  • Era isso mesmo. Obrigado! Commented 8/05/2018 às 15:23
  • Seria muito colocar na reposta as funções para avançar e retroceder? Tenho os buttons proximo e anterior Commented 8/05/2018 às 15:47
  • Na verdade não... mas isso já seria outra pergunta. Commented 8/05/2018 às 15:56
  • alterei lá. Pode dar uma olhada para mim. Está travando. funerariasaopedro.net.br/novo/index5.php Commented 8/05/2018 às 16:55
  • Essa não é a área adequada para isso... mas você não pode ter uma function e uma var chamadas slider no mesmo escopo... Commented 8/05/2018 às 17:20

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 .