JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.0.6-development-only.js"></script>
<div id="slider" class="jcarousel css-invisible"> <a href="#" class="slider-controller slider-controller-right next"></a>
 <a href="#" class="slider-controller slider-controller-left prev"></a>

    <div id="jcarousel-clip">
        <ul id="sliderItems">
            <li>
                 <h1>Home Energy Score</h1>

                <img src="https://www.myhomeworks.com/AppResourceMHW/uploadedImages/MyHomeWorks/Services/g-slide-1-thumb.jpg" alt="Introduction" />
                <p>Calculate your home`s efficiency and estimate potential energy.</p>
            </li>
            <li>
                 <h1>Home Energy Score</h1>

                <img src="https://www.myhomeworks.com/AppResourceMHW/uploadedImages/MyHomeWorks/Services/g-slide-2-thumb.jpg" alt="Introduction" />
                <p>Calculate your home`s efficiency and estimate potential energy.</p>
            </li>
            <li>
                 <h1>Home Energy Score</h1>

                <img src="https://www.myhomeworks.com/AppResourceMHW/uploadedImages/MyHomeWorks/Services/g-slide-3-thumb.jpg" alt="Introduction" />
                <p>Calculate your home`s efficiency and estimate potential energy.</p>
            </li>
            <li>
                 <h1>Home Energy Score</h1>

                <img src="https://www.myhomeworks.com/AppResourceMHW/uploadedImages/MyHomeWorks/Services/g-slide-4-thumb.jpg" alt="Introduction" />
                <p>Calculate your home`s efficiency and estimate potential energy.</p>
            </li>
            <li>
                 <h1>Home Energy Score</h1>

                <img src="https://www.myhomeworks.com/AppResourceMHW/uploadedImages/MyHomeWorks/Services/g-slide-5-thumb.jpg" alt="Introduction" />
                <p>Calculate your home`s efficiency and estimate potential energy.</p>
            </li>
        </ul>
    </div>

CSS

#slider {
    padding-top:10px
}
#slider #jcarousel-clip {
    position:relative;
    overflow:hidden;
    max-width:959px;
    height:184px
}
#slider #jcarousel-clip ul {
    width:20000em;
    position: absolute;
    list-style:none;
    margin:0;
    padding:0;
    top:0
}
#slider #jcarousel-clip ul li {
    float:left;
    background-color:#e6e9ee;
    cursor:pointer;
    margin-right:5px;
    width:188px;
    height:184px
}
#slider #jcarousel-clip ul li h1 {
    background:#82ae17 url('http://www.myhomeworks.com/mhw/images/bg-slider-item-heading.gif') left top no-repeat;
    color:White;
    font-size:13px;
    font-weight:normal;
    height:19px;
    line-height:18px;
    padding:0 10px 0 25px;
    margin:0px;
}
#slider #jcarousel-clip ul li p {
    color:#4e525b;
    font-size:12px;
    line-height:14px;
    padding:10px
}
#slider #jcarousel-clip ul li.active h1 {
    background-color:#4f5461;
    background-position:left bottom
}
#slider .slider-controller {
    display:block;
    height:184px;
    position:relative;
    width:30px;
    z-index:2
}
#slider .slider-controller.slider-controller-left {
    background:url('http://www.myhomeworks.com/mhw/images/bg-slider-controllers.jpg') left top no-repeat;
    float:left
}
#slider .slider-controller.slider-controller-left:hover {
    background-position:left bottom
}
#slider .slider-controller.slider-controller-right {
    background:url('http://www.myhomeworks.com/mhw/images/bg-slider-controllers.jpg') right top no-repeat;
    float:right
}
#slider .slider-controller.slider-controller-right:hover {
    background-position:right bottom
}

JavaScript

/*! jCarousel - v0.3.0-beta.5 - 2013-08-20
 * http://sorgalla.com/jcarousel
 * Copyright (c) 2013 Jan Sorgalla; Licensed MIT */
(function ($) {
    'use strict';

    var jCarousel = $.jCarousel = {};

    jCarousel.version = '0.3.0-beta.5';

    var rRelativeTarget = /^([+\-]=)?(.+)$/;

    jCarousel.parseTarget = function (target) {
        var relative = false,
            parts = typeof target !== 'object' ? rRelativeTarget.exec(target) : null;

        if (parts) {
            target = parseInt(parts[2], 10) || 0;

            if (parts[1]) {
                relative = true;
                if (parts[1] === '-=') {
                    target *= -1;
                }
            }
        } else if (typeof target !== 'object') {
            target = parseInt(target, 10) || 0;
        }

        return {
            target: target,
            relative: relative
        };
    };

    jCarousel.detectCarousel = function (element) {
        var carousel;

        while (element.size() > 0) {
            carousel = element.filter('[data-jcarousel]');

            if (carousel.size() > 0) {
                return carousel;
            }

            carousel = element.find('[data-jcarousel]');

            if (carousel.size() > 0) {
                return carousel;
            }

            element = element.parent();
        }

        return null;
    };

    jCarousel.base = function (pluginName) {
        return {
            version: jCarousel.version,
            _options: {},
            _element: null,
            _carousel: null,
            _init: $.noop,
            _create: $.noop,
            _destroy: $.noop,
            _reload: $.noop,
            create: function () {
                this._element.attr('data-' + pluginName.toLowerCase(), true)
                    .data(pluginName, this);

                if (false === this._trigger('create')) {
                    return this;
                }

                this._create();

               ...