1

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?

3 Respostas 3

0

Utilize breakpoints para ajustar a cada resolução de tela.

$(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;
          margin-top: 29%;
          text-align: center;
          color: rgb(255,255,255);
          z-index: 2;
		  
		  opacity                            : 0;
		  top                                : 5px;	  
		  -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>

0

Primeiro você deve fazer com que os spans tenha a mesma altura da nav, que é fixa em 40px. Depois ajustar o bottom inicial para -40px e quando receber a classe que faz a animação, para 0.

Veja os comentários no CSS para ver o que foi alterado e ajustado:

$(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 {
         height: 40px; /* adicionado */
          position: absolute;
          width: 200px;
          left: calc(50% - 100px);
          line-height: 40px;
          bottom: -40px !important; /* ajustado */
          text-align: center;
          color: rgb(255,255,255);
          z-index: 2;
		  
		  opacity                            : 1;
		  /* top                                : 85px;	removido */
		  -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;	removido */
        bottom: 0 !important;/* adicionado */
		  -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/3.3.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>

3
  • Desta forma não dá porque se o usuário clicar nas setas, para direita e para a esquerda, o texto não vai mais condizer com a imagem. No caso, o texto é uma descrição da imagem entende? Commented 10/05/2018 às 19:25
  • Mas a função que anima o texto é independente da que muda os slides. Teria que fazer uma chamada para a função do texto quando um botão for clicado. Nem no seu código original isso está funcionando direito. Apenas propus o que pediu a pergunta, que é ajustar os spans dentro da nav.
    – Sam
    Commented 10/05/2018 às 19:30
  • Pronto, não mexi em nada do JS, apenas no CSS.
    – Sam
    Commented 10/05/2018 às 20:00
0

Bom, vou dar a minha resposta.

Também pode ser visualizada online em Aqui

Resolvi deixar dentro do bloco com a imagem mesmo e fazer uma animação mais alta;

Mas ainda preciso de ajuda com 2 coisas:

1) Notem que, quando aparece o efeito faide, parece que o texto some (tem que olhar com atenção pois não é sempre que ocorre).

2) Não estou conseguindo compatibilizar os tempos das 3 animações para rodarem ao mesmo tempo.

Segue a resposta:

	  $(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, 4000);
         }
      
         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 1.5s linear, fade 1.5s linear;
          animation-fill-mode: forwards;
      }
      div.slider ul.slide li span {
          position: absolute;
          width: 500px;
          left: calc(50% - 250px);
				
		  font-family: 'Lato', sans-serif;
		  letter-spacing: 5px;
		  text-transform: uppercase;
          text-align: center;
          color: rgb(255,255,255);
		  
		  opacity : 0;
		  top : 60%;
		  font-size : 4vw;
		  -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;
		  
          z-index: 2;
      }
	  
	  div.slider ul.slide li.tituloAtivo span {
		  text-decoration : none;
		  opacity : 1;
		  top : 20%;
		  -webkit-transition : all 1.5s ease-in-out;
		  -moz-transition : all 1.5s ease-in-out;
		  -o-transition : all 1.5s ease-in-out;
		  transition : all 1.5s ease-in-out;
	  }
	  
      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 type="text/javascript" src="_js/jquery.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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .