Carousel element change capture

Asked

Viewed 81 times

0

I got the following carousel done in bootstrap

Previous Next

And I got the following js done in order to catch the title from whatever image you are ativa on screen at the moment:

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

    });
},1)

With this code, I take the title and play in a parágrafo as shown in the example below running:

		 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>

The code is working normally for the purpose I need, but I believe with the setInterval is not the most semantic way to perform this function.

My question is, is there another way to capture the moment the image was changed and capture its attribute title?

javascript jquery

1 answer

1


you do not need the setIterval just make the bind with the slid event. Once you are picking up the item information with the class .active this information is always available for the current item.

$(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>

Another and much simpler option is to include the title next to the items... which would also keep the slide effect for them.

<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>

  • Leandro, the first image is not pulling the title, only when the slide is done.

  • The slide.bs.carousel is the image transition event? It is the event triggered at the time of image exchange?

  • That, I edited to display the initial value also using the same function that updates in the slide event

  • The problem is that the second image comes with the title of the first and the third with the title of the second,.

  • Got it, in your case you need the slid event and not the slide (I changed the code), but this only fires at the end of the animation. Another alternative would be to simply write these values as part of each item’s template.

  • Leandro, thank you! How I would implement the values in the items?

  • Leandro, thank you for the answer, but in my case, the second option does not suit me, because I will display the title in another div, but the first option served me. Thank you!

Show 2 more comments

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.