1
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>
<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>The goal is to make as if the texts that are appearing appear on the navigation bar. That is, on top of it but with the same height and that also the effect of going up and down the text occurs slightly within that height.
Where am I going wrong?
This way it is not possible because if the user clicks on the arrows, to the right and to the left, the text will no longer match the image. In this case, the text is a description of the image understands?
– Carlos Rocha
But the function that animates the text is independent of the one that changes the slides. You would have to make a call to the text function when a button is clicked. Even in its original code this is working right. I just proposed what asked the question, which is to adjust the spans within the Nav.
– Sam
Okay, I didn’t touch anything on JS, just on CSS.
– Sam