JSFiddle - React, Tailwind, and code Playground

by gsiry01

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jQuery.dotdotdot/1.6.10/jquery.dotdotdot.js"></script>
<div id="myCarousel" class="carousel slide">
  <!-- Carousel items -->
  <div class="carousel-inner">
    <div class="active item">
        <img src="http://placehold.it/300x200/888&text=Item 1" />
        <div class="carousel-caption">
			<div class='dotdotdot'>
				<p class='ellipsis'>BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH 1234 1234 1234 1234 1234 1234 1234 1234 </p>
			</div>	
		</div>
    </div>
    <div class="item">
        <img src="http://placehold.it/300x200/aaa&text=Item 2" />
        <div class="carousel-caption">
			<div class='dotdotdot'>
				<p class='ellipsis'>BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH 1234 1234 1234 1234 1234 1234 1234 1234 </p>
			</div>	
		</div>
    </div>
    <div class="item">
        <img src="http://placehold.it/300x200/444&text=Item 3" />
        <div class="carousel-caption">
			<div class='dotdotdot'>
				<p class='ellipsis'>BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH 1234 1234 1234 1234 1234 1234 1234 1234 </p>
			</div>	
		</div>        
    </div>
  </div>
  <!-- Carousel nav -->
  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

CSS

@import url('//netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap-combined.min.css');

.dotdotdot{
		width: 450px;
		height: 35px;
}

.ellipsis {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;  
                -o-text-overflow: ellipsis;  
            }

JavaScript

// invoke the carousel
$('#myCarousel').carousel({
  interval: 3000
});

$('.dotdotdot').dotdotdot({
    // configuration goes here
});

// bind 'slid' function
$('#myCarousel').bind('slid', function() {

    // remove active class
    $('.carousel-linked-nav .active').removeClass('active');

    // get index of currently active item
    var idx = $('#myCarousel .item.active').index();

    // select currently active item and add active class
    $('.carousel-linked-nav li:eq(' + idx + ')').addClass('active');

});