JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<section class="content_whitebg">
    <div class="skin_width">
        <div class="skin_main_padding">
            <div class="row dnnpane">
                <div runat="server" id="MiddleGrid12" class="middlegrid12 col-sm-12">
                    
                    <div class="carouFredSel">
                        <div class="caroufredsel_wrapper">
                            <ul id="carouFredSel">
                                <li class="">
                                    <div class="carouFredSel_img">
                                        <a href="https://www.google.nl/">
                                            <img src="http://lorempixel.com/g/334/218/" />
                                        </a>
                                    </div>
                                </li>
                                <li class="">
                                    <div class="carouFredSel_img">
                                        <a href="https://www.google.nl/">
                                            <img src="http://lorempixel.com/g/334/218/" />
                                        </a>
                                    </div>
                                </li>
                                <li class="">
                                    <div class="carouFredSel_img">
                                        <a href="https://www.google.nl/">
                                            <img src="http://lorempixel.com/g/334/218/" />
                                        </a>
                                    </div>
                                </li>
                                <li class="">
                                    <div class="carouFredSel_img">
                                        <a href="https://www.google.nl/">
                                            <img src="http://lorempixel.com/g/334/218/" />
                ...

CSS

.content_whitebg {
    background: none repeat scroll 0 0 #fff;
}
.skin_width {
    margin: 0 auto;
    max-width: 1140px;
    min-width: 767px;
    position: relative;
    width: 100%;
}
.skin_main_padding {
    padding: 0 20px;
}    
.skin_main_padding {
    padding: 0 20px;
}

/*--------- CarouFredSel Style ----------*/
.carouFredSel
{
    position: relative;
}

.carouFredSel ul
{
    list-style: none;
    margin: 0;
    padding: 0;
    width: auto;
}

.carouFredSel ul li
{
    float: left;
    list-style: none;
    height: auto;
    margin: 0 15px;
    position: relative;
    min-height: 330px;
    border: 1px solid #e0e0e0;
}
.carouFredSel_img
{
    position: relative;
    filter: Alpha(Opacity=100);
    opacity: 1;
}
.carouFredSel_nav
{
    position: absolute;
    right: 0;
    top: -55px;
    padding: 5px 8px 5px 5px;
}
.carouFredSel_nav_prev
{
    position: absolute;
    left: -5px;
    top: 10%;
    /*padding: 5px 8px 5px 5px;*/
    padding: 90px 20px 90px 20px;
    opacity:0;
}
.carouFredSel_nav_next
{
    position: absolute;
    right: -5px;
    top: 10%;
    /*padding: 5px 8px 5px 5px;*/
    padding: 90px 20px 90px 20px;
    opacity:0;
}
.carouFredSel_nav_prev:hover, .carouFredSel_nav_next:hover
{
    opacity:0.9;
}

    .carouFredSel_nav a
    {
        outline: none;
    }

.caroul_prev
{
    background: url(../images/crousel_l.png) no-repeat center center #1b2e5a;
    margin-right: 5px;
    padding: 8px 20px;
    transition: all 0.8s ease 0s;
    -webkit-transition: all 0.8s ease 0s;
    -moz-transition: all 0.8s ease 0s;
}

.caroul_next
{
    background: url(../images/crousel_r.png) no-repeat center center #1b2e5a;
    padding: 8px 20px;
}
.caroul_next
{
    display:inline;
}
.carouFredSel_text
{
    padding: 15px;
}

    .carouFredSel_text span
    {
        color: #b9b9b9;
        font-size:0.9em;
    }

JavaScript

/*
 *	jQuery carouFredSel 6.2.1
 *	Demo's and documentation:
 *	caroufredsel.dev7studios.com
 *
 *	Copyright (c) 2013 Fred Heusschen
 *	www.frebsite.nl
 *
 *	Dual licensed under the MIT and GPL licenses.
 *	http://en.wikipedia.org/wiki/MIT_License
 *	http://en.wikipedia.org/wiki/GNU_General_Public_License
 */


(function($) {


	//	LOCAL

	if ( $.fn.carouFredSel )
	{
		return;
	}

	$.fn.caroufredsel = $.fn.carouFredSel = function(options, configs)
	{

		//	no element
		if (this.length == 0)
		{
			debug( true, 'No element found for "' + this.selector + '".' );
			return this;
		}

		//	multiple elements
		if (this.length > 1)
		{
			return this.each(function() {
				$(this).carouFredSel(options, configs);
			});
		}


		var $cfs = this,
			$tt0 = this[0],
			starting_position = false;

		if ($cfs.data('_cfs_isCarousel'))
		{
			starting_position = $cfs.triggerHandler('_cfs_triggerEvent', 'currentPosition');
			$cfs.trigger('_cfs_triggerEvent', ['destroy', true]);
		}

		var FN = {};

		FN._init = function(o, setOrig, start)
		{
			o = go_getObject($tt0, o);

			o.items = go_getItemsObject($tt0, o.items);
			o.scroll = go_getScrollObject($tt0, o.scroll);
			o.auto = go_getAutoObject($tt0, o.auto);
			o.prev = go_getPrevNextObject($tt0, o.prev);
			o.next = go_getPrevNextObject($tt0, o.next);
			o.pagination = go_getPaginationObject($tt0, o.pagination);
			o.swipe = go_getSwipeObject($tt0, o.swipe);
			o.mousewheel = go_getMousewheelObject($tt0, o.mousewheel);

			if (setOrig)
			{
				opts_orig = $.extend(true, {}, $.fn.carouFredSel.defaults, o);
			}

			opts = $.extend(true, {}, $.fn.carouFredSel.defaults, o);
			opts.d = cf_getDimensions(opts);

			crsl.direction = (opts.direction == 'up' || opts.direction == 'left') ? 'next' : 'prev';

			var	a_itm = $cfs.children(),
				avail_primary = ms_getParentSize($wrp, opts, 'width');

			if (is_true(opts.cookie))
			{
				opts.cookie = 'caroufredsel_cookie_' + conf.serialNumber;
			}

			opts.maxDimension =...