0

Tenho o seguinte carousel feito em bootstrap

Previous Next

E tenho o seguinte js feito com o objetivo de pegar o title da imagem que estiver ativa na tela no momento:

 setInterval( ()=> {
        $('#carousel-exemplo div.active').each(function() {
           var hr = this.getAttribute('title');              
           var select = $('img', this).attr('title');
           $('#showTitle').text(select);          

    });
},1)

Com esse código, pego o título e jogo em um parágrafo como mostra o exemplo abaixo em execução:

		 setInterval( ()=> {
			$('#carousel-exemplo div.active').each(function() {
               var hr = this.getAttribute('title');              
			   var select = $('img', this).attr('title');
			   $('#showTitle').text(select);		  
		
		});
	},1)		
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" /> 

<div class="container">
		<div class="row">
			<div class="col-md-2">
				<div id="carousel-exemplo" class="carousel slide" data-ride="carousel">
				  <div class="carousel-inner">
				    <div class="carousel-item active">
				      <img src="http://maxtitanium.com.br/images/share/200x200-2015-05-14-06-42-12.gif" class="img-fluid" alt="exemplo" title="Titulo de exemplo!">
				    </div>
				    <div class="carousel-item">
				      <img src="https://www.whatsbroadcast.com/wp-content/uploads/2017/05/WhatsApp-1-200x200.png" class="img-fluid" alt="exemplo" title="Titulo de exemplo 2!">
				    </div>
				    <div class="carousel-item ">
				      <img src="http://1001cursos.online/files/sites/3755/2017/09/logo-200-x-200.png" class="img-fluid" alt="exemplo" title="Titulo de exemplo 3!">
				    </div>
				  </div>
				  <a class="carousel-control-prev" href="#carousel-exemplo" role="button" data-slide="prev">
				    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
				    <span class="sr-only">Previous</span>
				  </a>
				  <a class="carousel-control-next" href="#carousel-exemplo" role="button" data-slide="next">
				    <span class="carousel-control-next-icon" aria-hidden="true"></span>
				    <span class="sr-only">Next</span>
				  </a>
				</div>	
				<p id="showTitle">aqui: </p>	
			</div>				
		</div>
	</div>	
  
<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

O código está funcionando normalmente com o objetivo que eu preciso, mas creio que com o setInterval não seja o modo mais semântico de realizar essa função.

Minha pergunta é, há outro modo de capturar o momento em que a imagem foi alterada e capturar o seu atributo title?

1 Resposta 1

1

você não precisa do setIterval basta fazer o bind com o evento de slid. Uma vez que você está pegando a informação do item com a classe .active essa informação está sempre disponível para o item atual.

$(document).ready(function() {
  
  //Exibe o título com o elemento active inicial
  setTituloActive();

  $('#carousel-exemplo').bind('slid.bs.carousel', function() {
    //atualiza o valor com o item ativo no momento.
    setTituloActive();
  });
});

function setTituloActive() {
  var elemento = $('#carousel-exemplo div.active');
  var select = $('img', elemento).attr('title');
  $('#showTitle').text(select);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />

<div class="container">
  <div class="row">
    <div class="col-md-2">
      <div id="carousel-exemplo" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="http://maxtitanium.com.br/images/share/200x200-2015-05-14-06-42-12.gif" class="img-fluid" alt="exemplo" title="Titulo de exemplo!">
          </div>
          <div class="carousel-item">
            <img src="https://www.whatsbroadcast.com/wp-content/uploads/2017/05/WhatsApp-1-200x200.png" class="img-fluid" alt="exemplo" title="Titulo de exemplo 2!">
          </div>
          <div class="carousel-item ">
            <img src="http://1001cursos.online/files/sites/3755/2017/09/logo-200-x-200.png" class="img-fluid" alt="exemplo" title="Titulo de exemplo 3!">
          </div>
        </div>
        <a class="carousel-control-prev" href="#carousel-exemplo" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carousel-exemplo" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
      <p id="showTitle">aqui: </p>
    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

Outra opção e muito mais simples, é incluir o título junto aos itens... o que também manteria o efeito de slide para eles.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />

<div class="container">
  <div class="row">
    <div class="col-md-2">
      <div id="carousel-exemplo" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="http://maxtitanium.com.br/images/share/200x200-2015-05-14-06-42-12.gif" class="img-fluid" alt="exemplo" title="Titulo de exemplo!">
             <p>Titulo de exemplo!</p>
          </div>
          <div class="carousel-item">
            <img src="https://www.whatsbroadcast.com/wp-content/uploads/2017/05/WhatsApp-1-200x200.png" class="img-fluid" alt="exemplo" title="Titulo de exemplo 2!">
            <p>Titulo de exemplo 2!</p>
          </div>
          <div class="carousel-item ">
            <img src="http://1001cursos.online/files/sites/3755/2017/09/logo-200-x-200.png" class="img-fluid" alt="exemplo" title="Titulo de exemplo 3!">
            <p>Titulo de exemplo 3!</p>
          </div>
        </div>
        <a class="carousel-control-prev" href="#carousel-exemplo" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carousel-exemplo" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>     
    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

7
  • Leandro, a primeira imagem não está puxando o título, apenas quando é realizado o slide. Commented 12/03/2018 às 15:09
  • O slide.bs.carousel é o evento de transição de imagem? É o evento disparado na hora da troca das imagens? Commented 12/03/2018 às 15:11
  • Isso, editei para exibir o valor inicial também usando a mesma função que atualiza no evento de slide Commented 12/03/2018 às 15:21
  • O problema é que a segunda imagem vem com título da primeira e a terceira com o título da segunda,e ao passar por todas as imagens a primeira imagem fica com o título da terceira. Commented 12/03/2018 às 15:24
  • Entendi, no seu caso precisa do evento slid e não o slide (mudei no código), porém esse só dispara ao fim da animação. Outra alternativa seria simplesmente escrever esses valores como parte do template de cada item. Commented 12/03/2018 às 15:42

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 .