Utilise the Bootstrap Carousel “slide” event and the .next class

Question

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

Tarandeep Gill Tarandeep Gill · Accepted Answer · 2013-02-20T18:39:06

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);
   });

Utilise the Bootstrap Carousel “slide” event and the .next class

1 Answers