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.