JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://wbotelhos.com/capty/js/jquery.capty.min.js"></script>
<div id="pageContainer">
    <!-- Slideshow HTML -->
    <div id="slideshow">
        <div id="slidesContainer">
            <div class="slide">
                <div class="image-container">
                    <img id="fixed_1" src="http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2012/11/6/1352219167838/Pole-anf-Line-Fishing-in--009.jpg" width="145" height="100" />
                    <p>Text One</p>
                </div>
                <div class="image-container">
                    <img id="fixed_1" src="http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2012/11/6/1352219167838/Pole-anf-Line-Fishing-in--009.jpg" width="145" height="100" />
                    <p>Text Two</p>
                </div>
                <div class="image-container">
                    <img id="fixed_1" src="http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2012/11/6/1352219167838/Pole-anf-Line-Fishing-in--009.jpg" width="145" height="100" />
                    <p>Text Three</p>
                </div>
                <div class="image-container">
                    <img id="fixed_1" src="http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2012/11/6/1352219167838/Pole-anf-Line-Fishing-in--009.jpg" width="145" height="100" />
                    <p>Text Four</p>
                </div>
                <div class="image-container">
                    <img id="fixed_1" src="http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2012/11/6/1352219167838/Pole-anf-Line-Fishing-in--009.jpg" width="145" height="100" />
                    <p>Text Five</p>
                </div>
            </div>
            <div class="slide">
                <div class="image-container">
                    <img id="fixed_1" src="http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2012/11/6/1352219167838/Pole-anf-Line-Fishing-in--009.jpg" width="145" height="100" />
                   ...

CSS

#slideshow {
    margin-top: 50px;
    width:890px;
    height:263px;
    position:relative;
}
#slidesContainer {
    margin:0 auto;
    width:765px;
    height:263px;
    overflow:hidden;
    /* allow scrollbar */
    position:relative;
}
.slide {
    margin: 0 0 0 40px auto;
    width:745px;
    /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */
    height:263px;
}
/** 
 * Slideshow controls style rules.
 */
 .control {
    display:block;
    width:39px;
    height:150px;
    text-indent:-10000px;
    position:absolute;
    cursor: pointer;
}
#leftControl {
    top:0;
    left:0;
    background-color:#000;
}
#rightControl {
    top:0;
    right:0;
    background-color:#000;
}
/** 
 * Style rules for Demo page
 */
 * {
    margin:0;
    padding:0;
    font:normal 11px Verdana, Geneva, sans-serif;
    color:#000;
}
a {
    color: #000;
    font-weight:bold;
    text-decoration:none;
}
a:hover {
    text-decoration:underline;
}
body {
}
#pageContainer {
    margin:0 auto;
    width:960px;
}
.slide img {
    display:block;
    float:right;
    margin-left: 3px;
    margin-right: 3px;
    height:150px;
    width:150px;
}
.image-container {
    float:left;
    display:inline-block;
}
.image-container p {
    text-align:left;
    color: #000;
    text-transform: uppercase;
    margin-left: 10px;
    top: -95px;
    position: relative;
}

JavaScript

$(document).ready(function () {
    var currentPosition = 0;
    var slideWidth = 900;
    var slides = $('.slide');
    var numberOfSlides = slides.length;


    // Wrap all .slides with #slideInner div
    slides.wrapAll('<div id="slideInner"></div>')
    // Float left to display horizontally, readjust .slides width
    .css({
        'float': 'left',
            'width': slideWidth
    });

    // Set #slideInner width equal to total width of all slides
    $('#slideInner').css('width', slideWidth * numberOfSlides);

    // Insert controls in the DOM
    $('#slideshow')
        .prepend('<span class="control" id="leftControl">Clicking moves left</span>')
        .append('<span class="control" id="rightControl">Clicking moves right</span>');

    // Hide left arrow control on first load
    manageControls(currentPosition);

    // Create event listeners for .controls clicks
    $('.control')
        .bind('click', function () {
            var control = $(this).attr('id');
        // Determine new position
            if(currentPosition > 0 && control == 'leftControl') {
        currentPosition = (control == 'rightControl') ? currentPosition + 1 : currentPosition - 1;
        // Hide / show controls
        manageControls(currentPosition);
        // Move slideInner using margin-left
        $('#slideInner').animate({
            'marginLeft': slideWidth * (-currentPosition)
        });
        }
            if(currentPosition < (numberOfSlides-1) && control=='rightControl') {
        currentPosition = (control == 'rightControl') ? currentPosition + 1 : currentPosition - 1;
        // Hide / show controls
        manageControls(currentPosition);
        // Move slideInner using margin-left
        $('#slideInner').animate({
            'marginLeft': slideWidth * (-currentPosition)
        });
            }
    });

    // manageControls: Hides and Shows controls depending on currentPosition
    function manageControls(position) {
        // Hide left arrow if...