Utilise the Bootstrap Carousel "slide" event and the .next class

carousel, html, javascript, jquery, twitter-bootstrap

Solution

I identified the problem. The issue is that the event 'slide' is called before the next slide is made visible. I added a little delay, and it works fine now. Try this:

   $('.carousel').carousel({
       interval: 5000
   }).on('slide', function (e) {
       var xx = $(this);
       setTimeout(function() {
           xx.find('.active').next().find('.slab').slabText();
       } , 0);
   });

Problem

So I've got a little problem (similar to this one I posted the other day: http://bit.ly/11JpbdY) with using SlabText on a piece of content that is hidden on load. This time, I'm trying to get slabText to update the display of some content that is in a slider (using Twitter Bootstrap's Carousel plugin). Following Twitter's documentation (http://twitter.github.com/bootstrap/javascript.html#carousel) for Bootstrap's Carousel plugin, I'm trying to use `slide` event so that I re-call SlabText to make it display correctly. Using developer tools I can see that Carousel adds a `.next` class as it processes the slide of one `.item` element to the next. This is then removed before the `.active` class is transferred. I can access the "slide" event without any issue, but trying to get hold of the `.next` element is proving troublesome. Here is a JSFiddle of my code thus far: http://jsfiddle.net/peHDQ/ To put my question simply; how should I correctly use the `slide` event to trigger a function? Please let me know if any additional information would be useful. Further notes: As I've been unable to get hold of the `.next` class, I'm attempting to do this with some jQuery. Here is my code thus far: ``` $('.carousel').carousel({ interval: 5000 }).on('slide', function (e) { $(this).find('.active').next().find('.slab').slabText(); }); ``` From what I understand this should be grabbing each `.slab` element and triggering the SlabText plugin.... alas I get an error: "Uncaught TypeError: Object [object Object] has no method 'slabtext' " Can anyone advise what I am doing wrong here...? I've used the exact same process to add a class and it works fine (as per this JSFiddle: http://jsfiddle.net/peHDQ/2/)

Original source