js loop does not show next item

Question

js loop does not show next item

Navigation

#1 by (1 votes)

0

My goal is to get a UL with your Lis and show it one by one. But not all at once.

So, when the first one is displayed, it will launch display:none in it and play display:block in the next one displaying 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><imgclass="fade" src="http://funerariasaopedro.net.br/novo/_img/_banner/_site/bg_2.jpg"/><span>Esteé2</span></li></ul><nav><buttonclass="anterior">Anterior</button>
  <button class="proximo">Próximo</button>
  </nav>
</div>

Follow the online link

link

Note: I would not like to use jQuery

in time: li's is in css with display:none exactly to put display:block only in what should appear

javascript

asked by anonymous 08.05.2018 / 16:09

1 answer

How to return the redirect URL with js? How to get an object inside another object in php?

score 1 · Accepted Answer

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 ativa class without adding any. And I was also calling the function slider() only once.

I made some changes to your script and added a treatment when it reaches the end of the <li> list, re-display the first 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><imgclass="fade" src="http://funerariasaopedro.net.br/novo/_img/_banner/_site/bg_2.jpg" />
      <span>Este é 2</span>
    </li>
  </ul>
</div>