Turbinating the bootstrap carousel

-1

To add own events in Carousel of bootstrap , use the

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

})

I would like to know how I can get the text to receive or lose opacidade according to the grandfather element that has 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 have tried using the methods .find() and .parent().parent() but without success.

    
asked by anonymous 23.01.2017 / 18:57

1 answer

1

You did not specify how you used $.find() . I made it here and everything went fine.

First you have to listen for an event of type slid.bs.carousel and not type slide.bs.carousel . Because? According to the documentation:

  

slide.bs.carousel - 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 listen to the second event, not the first. This wind is triggered when the carousel completes the transition of your 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 want to change the opacity of text that is within tag <h2> , I need to select this tag correctly. And there's more .. I just want the item that is active to receive these modifications. So the selection gets a bit more specific. So, within the function that is triggered at the end of each transition I execute:

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

Now just modify the structure, in this case I used animate() with random numbers just to make it look really cute.

The function was thus:

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

Describing: Each time a slide transition is over I'm going to select the h2 of the currently active item and animate the opacity property to a random number; this animation will take 1 second (1000 milliseconds).

I hope this can help you achieve what you want.

Run the sample code and see this logic in action. (Sometimes it takes time for the first transition to occur because of 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><scriptsrc="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.

    
24.01.2017 / 02:59