JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css">
<link rel="stylesheet" href="https://raw.github.com/freqdec/slabText/master/css/slabtext.css">
<script src="https://raw.github.com/freqdec/slabText/master/js/jquery.slabtext.min.js"></script>
<!doctype html>
<html>
<body>
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="active item">
<div class="container">
<div class="row">
<div class="span12">
<h2 class="light-title slab">
<span class="slabtext">Title number one</span>
</h2>
<h3 class="slab">
<span class="slabtext">This is some additional content</span>
<span class="slabtext">To show what it should look like</span>
</h3>
</div>
</div>
</div>
</div>
<div class="item">
<div class="container">
<div class="row">
<div class="span12">
<h2 class="light-title slab">
<span class="slabtext">Some other title.</span>
</h2>
<h3 class="slab">
<span class="slabtext">This is some additional content</span>
<span class="slabtext">To show what it should look like</span>
</h3>
</div>
...
JavaScript
$(document).ready(function () {
// -------- Initialise Slabtext -------- //
$('h1, .slab').slabText();
// -------- Initialise Carousel -------- //
$('.carousel').carousel();
// -------- Recall SlabText for hidden content -------- //
$('.carousel').on('slide', function (e) {
// alert("the slide event has fired!");
$(this).find('.next').find('.slab').addClass('testing');
});
});