JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://flexslider.woothemes.com/js/jquery.flexslider.js"></script>
<link rel="stylesheet" href="http://flexslider.woothemes.com/css/flexslider.css">
<!-- IMAGE SLIDER -->
<div class="image-slider full-width">
	<div class="image-slider-container">
		<div class="flexslider wide">
			<ul class="slides">
				<li class="cooling-slide">
					<div class="flex-caption">
						<h2 class="">Cooling</h2>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
						<a class="button" href="#">Find out more</a>
					</div>
				</li>
				<li class="heating-slide">
					<div class="flex-caption">
						<h2 class="">Heating</h2>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
						<a class="button" href="#">Find out more</a>
					</div>
				</li>
				<li class="ventilation-slide">
					<div class="flex-caption">
						<h2 class="">Ventilation</h2>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
						<a class="button" href="#">Find out more</a>
					</div>
				</li>
			</ul>
		</div>
	</div>
</div>

CSS

/* @group Image Slider */

.image-slider {
	position: relative;
	height: 412px;
	overflow: hidden;
	background: #34519c;
}

.image-slider-container {
	width: 950px;
	margin: 0 auto;
	height: 412px;
}

.flexslider {
	border: none;
	padding: 0;
	box-shadow: none;
	height: 412px;
	background: url(../images/image-slider/control-images/loading.gif) no-repeat center center;
}

.flexslider.wide {
	width: 1920px;
	margin: 0 auto;
	left: -485px;
}

.flex-control-nav {
	height: 84px;
	bottom: 14px;
	overflow: hidden;
	z-index: 100;
  
}

.flex-control-paging li a {
	border: none;
	box-shadow: none;
	cursor: pointer;
	display: block;
	height: 11px;
	text-indent: -9999px;
	width: 11px;
	background: pink;
}

.flex-control-paging li a:hover {
	background: #999;
}

.flex-control-paging li a.flex-active {
	background: #999;
}

.flex-control-nav li {
	bottom: 0;
	margin: 0 2px;
}

.flex-direction-nav a {
	width: 46px;
	height: 46px;
	opacity: 1;
}

.flex-direction-nav .flex-prev {
	left: 430px;
    display: none;
}

.flex-direction-nav .flex-next {
	right: 430px;
    display: none;
}

.flex-direction-nav a {
	margin: -10px 0 0;
}

.flex-caption {
	background: none;
	zoom: 1;
	width: 350px;
	padding: 0;
	margin: 0;
	position: absolute;
	left: 500px;
	top: 70px;
}

.flex-caption h2 {
	margin: 0;
	font-size: 70px;
	line-height: 95px;
	letter-spacing: -1px;
	color: white;
}

.flex-caption p {
	margin-top: -3px;
	margin-left: 7px;
	font-size: 15px;
	line-height: 22px;
	color: white;
	padding-right: 50px;
}

.flexslider .flex-caption a.button {
	float: left;
	margin-left: 7px;
	margin-top: 9px;
	text-decoration: none;
	line-height: 35px;
	font-weight: normal;
	font-size: 15px;
	text-align: center;
	text-shadow: 0px -1px 0px #000055;
	padding: 4px 22px;
	background-color: #000055;
	color: #fff;
	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
}

.flexslider .flex-caption a.button:hover {
	background-color: #cd33a4;
}

.flex-caption.inset p, .flex-caption.inset...

JavaScript

$(function() {    
    function setContainer() {
        var activeSlide = $(".flex-active-slide");
        var activeSlideClass = activeSlide.attr('class')
                                            .replace('flex-active-slide', '')
                                            .replace("-slide", "-container")
        var slider = activeSlide.closest(".image-slider.full-width");
        var latestClass = slider.data("latest-class");
        
        if (latestClass) {
            slider.removeClass(latestClass);
        }
        slider.addClass(activeSlideClass)
              .data("latest-class", activeSlideClass);
    }
        
    $('.flexslider').flexslider({
        animation: "fade",
        controlsContainer: ".flex-container",
        animationSpeed: 800,            //Integer: Set the speed of animations, in milliseconds
        slideshowSpeed: 10000,           //Integer: Set the speed of the slideshow cycling, in milliseconds
        after: function() { setContainer(); } 
    });
    
    setContainer();
});