JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://69.63.135.112/js/plugins/jquery.sudoSlider.min.228.js"></script>
<script src="http://69.63.135.112/js/libs/jquery.touchswipe.min.js"></script>
<div id="status">Started</div>
<div id="slideoverflow">
	<div id="feature">
        <ul>
            <li><a href="/index.cfm?contentID=3032"><img src="http://69.63.135.112/images/homepagebirthday2.jpg" width="102px" height="53px" border="0" alt="AFGE Celebrates 80 Years!" /></a></li>
            <li><a href="/Index.cfm?Page=VoterProtection"><img src="http://69.63.135.112/images/defenddemocracyweb9.jpg" width="102px" height="53px" border="0" alt="Voter Protection" /></a></li>
            <li><a href="/index.cfm?Fuse=Content&ContentID=3022"><img src="http://69.63.135.112/Images/tsastock9.jpg" width="102px" height="53px" border="0" alt="AFGE - TSA Labor Contract" /></a></li>
        </ul>
	</div>
</div>
<div id="swipeable">swipe me</div>

CSS

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
  display: block;
}
audio,
canvas,
[hidden] {
  display: none;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
ul:after {
  content: "";
  display: block;
  height: 0;
  visibility: hidden;
  clear: both;
}
li, table{
  font: 15px/22px Asap;
  color: #4e4e4e;
}
h1,
h2,
h6,
p,
a {
  -webkit-transition-duration: .25s;
  -webkit-transition-property: color, background-color;
  -moz-transition-duration: .25s;
  -moz-transition-property: color, background-color;
}
/* Default Links */
a {
  color: #5d93c4;
  text-decoration: none;
}
a:hover {
  color: #a8c5df;
}

/* Feature */
#feature {
  overflow: hidden;
  width: 100%;

}
/* Feature Slider */
#feature ul, #feature li{
  margin:0;
  padding:0;
  list-style:none;
  position:relative;
  display:block;
}
#feature, #feature li {
  width:102px;
  overflow:visible !important;
  margin:0 auto;
}
#feature li {
  opacity: 0.5;
  -moz-opacity: 0.5;
  filter:alpha(opacity=5);
}
#slideoverflow {
  width:100%;
  overflow: hidden;
}

#feature img {
  width:100%;
}
#feature .caption{  
  position: absolute;
  bottom:54px;
  left:20px;
  z-index:2;
  width:596px;
  display:none;
}
.caption h2{
	color:#fff;
}
#feature .controls{
  display: block;
  position: absolute;
  z-index: 2;
  text-indent: -9999px;
  background: url(/images/2012/arrowsprite1.png) no-repeat;
  width: 80px;
  height: 80px;
  top: 200px;
}
#feature .controls:hover{
	background: url(/images/2012/arrowspritemo2.png) no-repeat;
}
#feature .controls.next {
  right: 0px;
  background-position-x:-80px;
}

#feature .controls.prev {
  left: 0px;
  z-index: 100;
  background-position: left top;
}
div#status{
	height:50px;
    width:100%;
}
div#swipeable{
    height:100px;
    width:100%;
    border:1px solid black;

}

JavaScript

// slide counter and runner for functions
	var currentAutoSlide = 0;
	var totalAutoSlides = $('#feature ul li').length;
	var totalVirtualSlides = totalAutoSlides + 2;

    // cancel <a> clicks so we can test the slider
	$('#feature').bind('click',function(){
		//return false;
	})
	
	// Main Feature Slider
	$('.caption').slideUp(1);
	$('#feature li').fadeTo(1, .3);
    $('.caption').css("display","none");
		var ulMarginLeft = 0;
		var auto = true;
		var autostopped = true;
        var sudoSlider = $("#feature").sudoSlider({
           continuous:true,
           prevNext:false,
		   controlsShow:false,
           auto:false,
           pause:'8000',
			afterAniFunc: function(t){
				increaseCounter();
				animateCurrentSlideIn(this);
				animateCurrentSlideOut();
			}
	    });
		sudoSlider.startAuto();


		function animateCurrentSlideIn(thisObj){
			$(thisObj).children('.caption').delay(400).slideDown(400);
			$(thisObj).fadeTo(400, 1);
			ulMarginLeft = $("#feature ul").css("marginLeft");
			ulMarginLeft = Number(ulMarginLeft.substring(0, ulMarginLeft.length - 2));
		}
		function animateCurrentSlideOut(){
			previousSlide = currentAutoSlide-1;
			sliceStop = currentAutoSlide;
			$('#feature ul li').slice(previousSlide,sliceStop).children('.caption').slideUp(400);
		    $('#feature ul li').slice(previousSlide,sliceStop).fadeTo(400, .5);
			$('#feature ul li').slice(currentAutoSlide+2).children('.caption').slideUp();
		    $('#feature ul li').slice(currentAutoSlide+2).fadeTo(1, .5);
		}
		function increaseCounter(){
			if(currentAutoSlide == totalAutoSlides){
				currentAutoSlide = 1;
			} else {
				currentAutoSlide++;
			}
		}
		function decreaseCounter(){
			if(currentAutoSlide == 1){
				currentAutoSlide = totalAutoSlides-1;
			} else {
				currentAutoSlide--;
				currentAutoSlide--;
			}
		}






    $(function(){
		// Touch Screen features
		$('#feature').swipe( {
	        swipeStatus:function(event, direction, distance, duration, fingerCount) {
	         ...