Tenho o seguinte código:
$(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>
<div class="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>
<img src="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>
<button class="anterior setaEsquerda"></button>
<button class="proximo setaDireita"></button>
</nav>
</div>
O objetivo é fazer como que os textos que estão aparecendo apareça sobre a barra de navegação. Isto é, em cima dela porém com a mesma altura e que também o efeito de subir e descer do texto ocorra levemente dentro dessa altura.
Onde estou errando?