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