JSFiddle - React, Tailwind, and code Playground

by edwardantony

HTML

<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
 
    <!-- main slider carousel -->
    <div class="row">
    <div class="col-md-12" id="slider">
 <div class="col-md-12" id="carousel-bounding-box">
  <div id="ek_Carousel" class="carousel slide">
                        <!-- main slider carousel items -->
    <div class="carousel-inner">
    <div class="active item" data-slide-number="0">
    <img src="http://placehold.it/1200x480&amp;text=1" class="img-responsive" />
                            </div>
    <div class="item" data-slide-number="1">
    <img src="http://placehold.it/1200x480&amp;text=2" class="img-responsive" />
                            </div>
        <div class="item" data-slide-number="2">
    <img src="http://placehold.it/1200x480&amp;text=3" class="img-responsive" />
                            </div>
        <div class="item" data-slide-number="3">
    <img src="http://placehold.it/1200x480&amp;text=4" class="img-responsive" />
                            </div>
        <div class="item" data-slide-number="4">
    <img src="http://placehold.it/1200x480&amp;text=5" class="img-responsive" />
                            </div>
        <div class="item" data-slide-number="5">
    <img src="http://placehold.it/1200x480&amp;text=6" class="img-responsive" />
                            </div>
        <div class="item" data-slide-number="6">
    <img src="http://placehold.it/1200x480&amp;text=7" class="img-responsive" />
                            </div>
        <div class="item" data-slide-number="7">
    <img src="http://placehold.it/1200x480&amp;text=8" class="img-responsive" />
                            </div>
        <div class="item" data-slide-number="8">
    <img src="http://placehold.it/1200x480&amp;text=9" class="img-responsive" />
                            </div>
        <div class="item"...

CSS

#slider-thumbs {width:100%; margin-top:2%;}

JavaScript

$(document).ready(function() {
$('#ek_Carousel').carousel({
    interval: 4000
});

// handles the carousel thumbnails
$('[id^=carousel-selector-]').click( function(){
  var id_selector = $(this).attr("id");
  var id = id_selector.substr(id_selector.lastIndexOf("-")+1);
  id = parseInt(id);
  $('#ek_Carousel').carousel(id);
  $('[id^=carousel-selector-]').removeClass('selected');
  $(this).addClass('selected');
});

// when the carousel slides, auto update
$('#ek_Carousel').on('slid', function (e) {
  var id = $('.item.active').data('slide-number');
  id = parseInt(id);
  $('[id^=carousel-selector-]').removeClass('selected');
  $('[id=carousel-selector-'+id+']').addClass('selected');
});
        
});