JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://coolcarousels.frebsite.nl/js/jquery.carouFredSel.js"></script>
<script src="http://cdn.oomta.com/js/jquery/touchswipe/1.3.3/jquery.touchSwipe.min.js"></script>
<div id="carousel_wrap">
<ul id="carousel">
    <li><img width="200" height="100" src="http://lorempixel.com/100/100" class="attachment-full"/>					
        <div class="content bottom-left"><div><p>Lorem ipsum dolor sit amet</p></div></div>
    </li> 
                 <li><img width="300" height="100" src="http://lorempixel.com/100/100" class="attachment-full"/>					
        <div class="content bottom-left"><div><p>Lorem ipsum dolor sit amet</p></div></div>
    </li> 
        <li><img width="500" height="100" src="http://lorempixel.com/100/100" class="attachment-full"/>					
        <div class="content bottom-left"><div><p>Lorem ipsum dolor sit amet</p></div></div>
    </li> 
        <li><img width="1000" height="100" src="http://lorempixel.com/100/100" class="attachment-full"/>					
        <div class="content bottom-left"><div><p>Lorem ipsum dolor sit amet</p></div></div>
    </li> 
        <li><img width="300" height="100" src="http://lorempixel.com/100/100" class="attachment-full"/>					
        <div class="content bottom-left"><div><p>Lorem ipsum dolor sit amet</p></div></div>
    </li> 
        <li><img width="300" height="100" src="http://lorempixel.com/100/100" class="attachment-full"/>					
        <div class="content bottom-left"><div><p>Lorem ipsum dolor sit amet</p></div></div>
    </li> 
        <li><img width="300" height="100" src="http://lorempixel.com/100/100" class="attachment-full"/>					
        <div class="content bottom-left"><div><p>Lorem ipsum dolor sit amet</p></div></div>
    </li> 
</ul>
<a id="prev" class="carousel_nav" title="Show Previous" href="#" style="display: block;"> 1</a>
<a id="next" class="carousel_nav" title="Show Next" href="#" style="display: block;">2 </a>
</div>

CSS

/*   
Theme Name: HTML5 BLANK
Theme URI: Theme URI
Description: Responsive theme for iPad & iPhone built for WP 3.4
Author: &Aacute;ngel Meraz
Author URI: Author URI
Version: 1.0
*/

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, 
p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, 
img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, hr, 
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figure, figcaption, hgroup, 
menu, footer, header, nav, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
}

article, aside, canvas, figure, figure img, figcaption, hgroup,
footer, header, nav, section, audio, video {
	display: block;
}

a img {border: 0;}

/* GENERIC */
* { margin: 0; padding: 0; }
.screen-reader-text { position: absolute; left: -9999px; top: -9999px; }
.clear { clear: both; }
.group:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
* html .group, *:first-child+html .group { zoom: 1; } /* First selector = IE6, Second Selector = IE 7 */

a { color: inherit; text-decoration: none }
a:hover { }

h1, h2, h3 {
	color: #000;
	font-weight: normal;
	letter-spacing: 3px;
	text-transform: uppercase;
}
h1 { font-size: 35px; line-height: normal; text-transform: none }
h2 { font-size: 18px }
h3 { font-size: 14px }

img { max-width: 100%; height: auto }

p, blockquote { margin: 0 0 30px 0 }

li { list-style: none }

form { }
input[type=text] { }
textarea { }

::selection {
	background-color: #CCC
}
::-moz-selection {
	background-color: #CCC
}
img::selection {
	background: transparent
}
img::-moz-selection	{
	background: transparent
}

.aligncenter {
	display: block;
	margin: 0 auto;
}
.left { float: left }
.right { float: right }

/* MAIN */
html, body { height: 100% }
body {
    background-color: #FFF;
    color: #808285;
    margin: 0 auto;
    font: 14px/24px "Palatino...

JavaScript

$('#carousel').carouFredSel({
    width: "100%",
    align: 'center',
    responsive  : true,
    items: {},
    scroll: {  delay: 0,
    easing: 'linear',
    items: 1,
    duration: 0.04,
    timeoutDuration: 0,
    },
    auto: { play: true },
    prev: { button: "#prev", key: "left" },
    next: { button: "#next", key: "right" },
    swipe: true
});