js loop does not show next item

Question

My goal is to catch a UL with their Lis and show one to one. But not all at once.

So that, shown the first, set display:none in it and game display:block next time showing it.

But by my code the next one is NOT being displayed.

Where is the error?

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>

Follow the online link

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

Note: I would not like to use jQuery

in time: As li’s stay in the css with display:none exactly to put display:block only in what should appear

Answer 1

The detail is in your index validation, because if there is no next one but the current item is the last you just remove the class ativa without adding any. And was also calling the function slider() only once.

I made some changes to your script and added a treatment for when you reach the end of the list of <li>, display the first item again.

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>