Turbineing the bootstrap Carousel

Question

To add own events on Carousel of bootstrap, use the function

$('#myCarousel').on('slide.bs.carousel', function () {

})

I wonder, how can I make the text receive or lose opacidade according to the grandfather element having the class active of bootstrap.

HTML

<div class="carousel-inner" role="listbox">
    <div class="item active">
        <div class="carousel-caption">
            <div class="caption-holder">
                <h2>Nossa missão é fazer o bem!</h2>
                <p>Você também pode nos ajudar</p>
            </div>
        </div>
    </div>
    <div class="item">
        <div class="carousel-caption">
            <div class="caption-holder">
                <h2>Se você não tem nada para doar</h2>
                <p>Doe um gesto de carinho a quem precisa</p>
            </div>
        </div>
    </div>
</div>

I tried using the methods .find() and .parent().parent() but without success.

Answer 1

You didn’t specify how you used the $.find(). I did it here and it all worked out.

First you need to hear an event like slid.bs.carousel and not the type slide.bs.carousel. Why? According to the documentation:

slide.bs. - This Event Fires immediately when the slide instance method is Invoked. slid.bs.Carousel - This Event is Fired when the Carousel has completed its slide Transition.

I suppose to get what you want, you need to hear the second event, not the first. This wind is triggered when the carousel completes the transition of its slides, Free translation.

Then there’s something like this:

$(".carousel").on("slid.bs.carousel", function() {
  //lógica aqui
}

The logic is as follows: If I wish to change the opacity of the text that is within the tag <h2>, I need to select this tag correctly. And there’s more.. I just want the item that’s active to receive these modifications. So the selection gets a little more specific. So, within the function that is fired at the end of each transition I run:

$(this).find(".active h2") //tenho acesso ao objeto javascript da tag H2 do item atual

Now just modify the structure, in which case I used the animate() with random numbers just to make it cuter.

That was the function:

$(".carousel").on("slid.bs.carousel", function() {
    $(this).find(".active h2").animate({
      opacity: Math.random()
    }, 1000);
});

Describing: Each time a slide transition ends, I will select the h2 of the currently active item and animate the property opacity for a random number; this animation will last 1 second (1000 milliseconds).

I hope this can help you achieve what you want.

Run the example code and see this logic in action. (Sometimes it takes time for the first transition to occur because of the dependencies, but just wait)

$(function() {
  $(".carousel").carousel({
    interval: 2000
  });
  $(".carousel").on("slid.bs.carousel", function() {
    $(this).find(".active h2").animate({
      opacity: Math.random()
    }, 1000);
  });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="http://lorempixel.com/400/200/" alt="..." class="img-responsive">
      <div class="carousel-caption">
        <div class="caption-holder">
          <h2>Nossa missão é fazer o bem!</h2>
          <p>Você também pode nos ajudar</p>
        </div>
      </div>
    </div>
    <div class="item">
      <img src="http://lorempixel.com/400/200/" alt="..." class="img-responsive">
      <div class="carousel-caption">
        <h2>Se você não tem nada para doar</h2>
        <p>Doe um gesto de carinho a quem precisa</p>
      </div>
    </div>
    ...
  </div>
</div>

A hug, see you later.