StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POUtilise the Bootstrap Carousel "slide" event and the .next class
text
Body
copied!<p>So I've got a little problem (similar to this one I posted the other day: <a href="http://bit.ly/11JpbdY" rel="noreferrer">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" rel="noreferrer">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/" rel="noreferrer">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/" rel="noreferrer">http://jsfiddle.net/peHDQ/2/</a>)</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload