Tenho o seguinte carousel
feito em bootstrap
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
?