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