Change element capture in cars

Question

Change element capture in cars

Navigation

#1 by (1 votes)

0

I have the following carousel done in bootstrap

Previous Next

And I have the following js done in order to get the title of the image that is ativa on the 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 get the title and game in a parágrafo as shown in the example below:

		 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 that with setInterval is not the most semantic way to accomplish this function.

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

javascript jquery

asked by anonymous 12.03.2018 / 15:40

1 answer

How to change the location of the database Update child component method VueJS

score 1 · Accepted Answer

You do not need to setIterval just bind with the slid event. Once you are picking up information from the item with 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,andmuchsimpler,optionistoincludethetitlenexttotheitems...whichwouldalsokeeptheslideeffectforthem.

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