JSFiddle - React, Tailwind, and code Playground

by masterbee

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div class="container">
            <div class="row">
                <div class="span12">
                    <h1>Bootstrap Carousel (jCarousel style) Example</h1>
                    <p>
                        Carosouel
                    </p>
                </div>
                <div class="span12">
                    <div class="carousel jcarousel span12" id="myCarousel">
                        <div class="carousel-inner">
                            <div class="item active">
                                  <div class="row">
                                    <div class="span2">
                                        <div class="thumbnail">
                                            <img src="http://placehold.it/260x180" alt="">
                                        </div>
                                    </div>
                                    <div class="span2">
                                        <div class="thumbnail">
                                            <img src="http://placehold.it/260x180" alt="">
                                        </div>
                                    </div><div class="span2">
                                        <div class="thumbnail">
                                            <img src="http://placehold.it/260x180" alt="">
                                        </div>
                                    </div><div class="span2">
                                        <div class="thumbnail">
                                            <img src="http://placehold.it/260x180" alt="">
                                        </div>
                                    </div><div class="span2">
                                        <div class="thumbnail">
                                            <img src="http://placehold.it/260x180" alt="">
                                        </div>
           ...

CSS

.carousel.jcarousel .item {
    width: 20000em;
}

JavaScript

// Generated by CoffeeScript 1.3.3

(function($) {
  var _next, _prev;
/* lets safely prototype the next/prev function to allow for this solution to withstand upgrades in TB
=====================================================*/
  _next = $.fn.carousel.Constructor.prototype.next;
  _prev = $.fn.carousel.Constructor.prototype.prev;
  $.fn.carousel.Constructor.prototype.next = function() {
    this.$element.trigger('pln.next');
    return _next.call(this);
  };
  $.fn.carousel.Constructor.prototype.prev = function() {
    this.$element.trigger('pln.prev');
    return _prev.call(this);
  };
/* in short we simply cloned the TB function and triggered our own custom event to allow us to bind in our own logic
    jQuery style
=====================================================*/
  $('div.carousel.jcarousel').each(function() { /* we are only interested in .jcarousel optioned carousel */
      /* create our variables safely in local scope */
      var item_width, stop_pos, total_items, total_width, visible_items, visible_width, _carousel, _slider;
   
      _carousel = $(this); /* lets jQuerify our carousel */
      /**
       * Gather some dimensions for our next/prev events to be able to calculate the correct carousel movements
       * total_items = the count how many items we have in the carousel window to move. 
       *                 Note: that we are counting the spanX in the carousel.
       * item_width = the width of the first spanX. We are going to assume that all items are created of equal width. 
       *                 (this could be extended to handle multiple widths but it would change the dynamics of the movement to more a per click algorithm instead of global on init like this)
       * total_width = the total width of the carousel items
       *                  (since our CSS uses an arbitary width on the .item.active in the carousel of 20000em we need to get the real dimensions to shrink it down to is actual size. 
       *                    ...