I have the following code:
$(document).ready(function(){
function animaTextos(){
var interval;
var contador = 1;
var funcao = function() {
var corrente = $('div.slider ul.slide li').length;
if(corrente == contador) {
$('div.slider ul.slide li.tituloAtivo').removeClass('tituloAtivo');
$('div.slider ul.slide li').first().addClass('tituloAtivo');
contador = 1;
} else {
contador++;
$('div.slider ul.slide li.tituloAtivo').removeClass('tituloAtivo').next().addClass('tituloAtivo');
}
};
interval = setInterval(funcao, 1000);
}
animaTextos();
});
window.onload = function() {
var indexAtiva = 0;
const lis = document.getElementsByClassName('slider').item(0).getElementsByTagName('li');
function slider(s) {
for (i = 0; i < lis.length; i++) {
lis[i].classList.remove('ativa');
}
// aqui irá tratar o clique no "Anterior".
// É preciso tratar de 3 formas diferentes
// dependendo do valor de indexAtiva.
// Veja que o valor de indexAtiva, em cada caso,
// irá receber o valor do índice ativado
if(s){
// significa que o próximo a mostrar será o
// slide de índice 1, então está sendo exibido o 0.
// neste caso eu ativo o último da array
if(indexAtiva == 1){
lis[lis.length-1].className = 'ativa';
indexAtiva = lis.length-1;
// aqui diz que está exibindo o último,
// logo próximo será o primeiro (índice 0).
// Então eu ativo o antepenúltimo da array
}else if(indexAtiva == 0){
lis[lis.length-2].className = 'ativa';
indexAtiva = lis.length-2;
// aqui é quando não for nenhum dos casos anteriores.
// Eu diminuo 2 índices porque mais a frente será
// incrementado com +1
}else{
lis[indexAtiva-2].className = 'ativa';
indexAtiva -= 2;
}
}else{
// aqui é quando for clicado o botão "próximo"
// ou quando nenhum botão for clicado
lis[indexAtiva].className = 'ativa';
}
indexAtiva = indexAtiva + 1 == lis.length ? 0 : indexAtiva+=1;
tempo = setTimeout(slider, 3000);
}
slider();
var slider1 = document.getElementsByClassName('slider')[0]
var nav = slider1.getElementsByTagName('nav')[0]
var anterior = nav.getElementsByClassName('anterior')[0]
var proximo = nav.getElementsByClassName('proximo')[0]
anterior.onclick = function(){
clearTimeout(tempo);
slider(true);
}
proximo.onclick = function(){
clearTimeout(tempo);
slider();
}
} * {
margin: 0;
padding: 0;
border: none;
outline: 0;
}
body {
width: 100vw;
}
ul {
list-style: none;
}
.setaDireita {
background-image:url(_img/_bannerImgs/direita.png);
background-repeat:no-repeat;
background-position: center center;
}
.setaEsquerda {
background-image:url(_img/_bannerImgs/esquerda.png);
background-repeat:no-repeat;
background-position: center center;
}
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
@keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
@keyframes slider {
0% {
transform: scale(1);
}
100% {
transform: scale(1.1);
}
}
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%;
animation: slider 1s linear, fade 1s linear;
animation-fill-mode: forwards;
}
div.slider ul.slide li span {
position: absolute;
width: 200px;
left: calc(50% - 100px);
line-height: 40px;
bottom: 0;
text-align: center;
color: rgb(255,255,255);
z-index: 2;
opacity : 0;
top : 85px;
-webkit-transition : all 0.5s ease-in-out;
-moz-transition : all 0.5s ease-in-out;
-o-transition : all 0.5s ease-in-out;
transition : all 0.5s ease-in-out;
transition-timing-function : ease;
-webkit-transition-timing-function : ease; /* Safari and Chrome */
}
div.slider ul.slide li.tituloAtivo span {
font-size:30px;
opacity : 1;
top : 0;
-webkit-transition : all 1s ease-in-out;
-moz-transition : all 1s ease-in-out;
-o-transition : all 1s ease-in-out;
transition : all 1s ease-in-out;
transition-timing-function : ease;
-webkit-transition-timing-function : ease; /* Safari and Chrome */
}
div.slider nav {
position: absolute;
width: 100%;
height: 40px;
bottom: 0;
background-color: rgba(0,0,0,.5);
z-index: 1;
}
div.slider nav button {
position: absolute;
width: 40px;
height: 40px;
cursor: pointer;
}
div.slider nav button.anterior {
left: 10%;
}
div.slider nav button.proximo {
right: 10%;
} <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="slider">
<ul class="slide">
<li class="ativa tituloAtivo">
<img src="http://funerariasaopedro.net.br/novo/_img/_banner/_site/bg_1.jpg"/><span>Esteé1</span></li><li><imgsrc="http://funerariasaopedro.net.br/novo/_img/_banner/_site/bg_2.jpg" />
<span>Este é 2</span>
</li>
<li>
<img src="http://funerariasaopedro.net.br/novo/_img/_banner/_site/bg_3.jpg"/><span>Esteé3</span></li></ul><nav><buttonclass="anterior setaEsquerda"></button>
<button class="proximo setaDireita"></button>
</nav>
</div>The purpose is to make the text appearing appear on the navigation bar. That is, on top of it however with the same height and also the effect of going up and down the text occurs slightly within that height.
Where am I going wrong?