JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://css-tricks.com/examples/FeaturedContentSlider/js/coda-slider.1.1.1.pack.js"></script>
<script src="http://css-tricks.com/examples/FeaturedContentSlider/js/jquery-easing-compatibility.1.2.pack.js"></script>
<script src="http://css-tricks.com/examples/FeaturedContentSlider/js/jquery-easing-1.3.pack.js"></script>
    <div class="slider-wrap">
        <div id="main-photo-slider" class="csw">
            <div class="panelContainer">
                <div class="panel" title="Panel 1">
                    <div class="wrapper">
                        <img src="http://i.imgur.com/JDG8W.jpg" alt="temp" />
                        <div class="photo-meta-data">
                            Photo Credit: <a href="http://flickr.com/photos/astrolondon/2396265240/">Kaustav Bhattacharya</a><br />
                            <span>"Free Tibet" Protest at the Olympic Torch Rally</span>
                        </div>
                    </div>
                </div>
                <div class="panel" title="Panel 2">
                    <div class="wrapper">
                        <img src="http://i.imgur.com/Bylgp.jpg" alt="temp" />
                        <div class="photo-meta-data">
                            Chicago Bears at Seattle Seahawks<br />
                            <span>Fifth field goal, overtime win for the Seahawks</span>
                        </div>
                    </div>
                </div>        
                <div class="panel" title="Panel 3">
                    <div class="wrapper">
                        <img src="http://i.imgur.com/pqHWo.jpg" alt="scotch egg" />
                        <div class="photo-meta-data">
                            What to say for Panel 3<br />
                            <span>Falling down</span>
                        </div>
                    </div>
                </div>
                <div class="panel" title="Panel 4">
                    <div class="wrapper">
                       ...

CSS

.floatLeft {
    float: left;
    margin-right: 10px;
}
a {
    outline-color: -moz-use-text-color;
    outline-style: none;
    outline-width: medium;
}
ul {
    list-style-image: none;
    list-style-position: inside;
    list-style-type: square;
}
a, a:visited {
    color: #729DFF;
    text-decoration: none;
}
a:hover, a:active {
    color: white;
}
.slider-wrap {
    top: 7px;
    left: 40px;
    position: relative;
    /*background:yellow;*/
    /*width: 419px;*/
    width:546px;
    /*height:243px;*/
    border:2px solid #ccc;
}
.stripViewer .panelContainer .panel ul{
    margin-bottom: 0;
    /*margin-left: 30px;*/
    margin-left: 30px;
    margin-right: 15px;
    margin-top: 0;
    text-align: left;
}
.stripViewer {
    height: 285px;
    overflow-x: hidden;
    overflow-y: hidden;
    position: relative;
    /*width: 419px;*/
    width:546px;
}
.stripViewer .panelContainer {
    left: 0;
    position: relative;
    top: 0;
}
.stripViewer .panelContainer .panel {
    float: left;
    height: 100%;
    position: relative;
    /*width: 419px;*/
    width:546px;
}
.stripNavL, .stripNavR, .stripNav {
    display: none;
}
#movers-row {
    /*margin: -14px 0 0 0;*/
    margin: 0 0 0 0;
    padding-top: 13px;
    /*background: green;*/
    width: 546px;
    overflow: hidden;
}
#movers-row div {
    float: left;
}
#movers-row div img {
    display: block;
    /*padding: 6px;*/
    padding: 4px 6px 3px 6px;
}
#movers-row div a.cross-link {
    display: block;
}
.photo-meta-data {
    -moz-background-clip: border;
    -moz-background-origin: padding;
    -moz-background-size: auto auto;
    background-attachment: scroll;
    background-color: transparent;
    background-image: url("http://css-tricks.com/examples/FeaturedContentSlider/images/transpBlack.png");
    background-position: 0 0;
    background-repeat: repeat;
    color: white;
    height: 30px;
    margin-top: -50px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
   ...

JavaScript

var theInt = null;
var $crosslink, $navthumb;
var curclicked = 0;

theInterval = function(cur){
    clearInterval(theInt);
    
    if( typeof cur != 'undefined' )
        curclicked = cur;
        
    $crosslink.removeClass("active-thumb");
    $navthumb.eq(curclicked).parent().addClass("active-thumb");
        $(".stripNav ul li a").eq(curclicked).trigger('click');
            
    theInt = setInterval(function() {
        $crosslink.removeClass("active-thumb");
        $navthumb.eq(curclicked).parent().addClass("active-thumb");
        $(".stripNav ul li a").eq(curclicked).trigger('click');
        curclicked++;
        if( 7 == curclicked )
            curclicked = 0;
            
    }, 3000);
};
        
// DOM Ready
$(function() {
            
    $("#main-photo-slider").codaSlider();
            
    $navthumb = $(".nav-thumb");
    $crosslink = $(".cross-link");
            
    $navthumb
        .click(function() {
            var $this = $(this);
            theInterval($this.parent().attr('href').slice(1) - 1);
            return false;
        });
        
    theInterval();
});