JSFiddle - React, Tailwind, and code Playground

HTML

<div class="navigator">

<div class="left_hand_icon">Left</div>
<div class="right_hand_icon">Right</div>
</div>

<div id="outer-container">
    <div id="container">
        <div id="slide1">Slide 1 content</div>
        <div id="slide2">Slide 2 content</div>
        <div id="slide3">Slide 3 content</div>
        <div id="slide4">Slide 4 content</div>
    </div>
</div>

CSS

.navigator{
    display: block;
}

.navigator div{
    display: inline;
}

.left_hand_icon{
    margin-right: 30px;
}

#outer-container{
    width: 95px;
    height: 30px;
    overflow: hidden;
    border: 1px solid #999;
}

#container{
    width: 500px;
    height: 30px;
    display: inline-block;
    position: relative;
}

#container div{
    display: inline;
    padding: 2px 10px;
}

JavaScript

var performOperations = (function () {
    var checkIndex = 0,
        bindFunctions = function () {
            $('.left_hand_icon').bind('click', function () {
                if (checkIndex < $('#container').find('div').length && checkIndex >= 0) {
                    $('#container').animate({
                        left: ($('#container').offset().left - 122)
                    });
                    console.log( $('#container').offset().left);
                    checkIndex++;
                }
            });
            $('.right_hand_icon').bind('click', function () {
                if (checkIndex > 0) {
                    $('#container').animate({
                        left: ($('#container').offset().left + 102)
                    });
                    console.log( $('#container').offset().left);
                    checkIndex--;
                }
            });
        };
        return {
            init: function () {
                bindFunctions();
            }
        };
}());

performOperations.init();