JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outer-container">
    <div class="panel-container">
        <ul id="panels" class="clearfix">
            <li class="panel" data-index="0">1</li>
            <li class="panel" data-index="1">2</li>
            <li class="panel" data-index="2">3</li>
            <li class="panel" data-index="3">4</li>
            <li class="panel" data-index="4">5</li>
            <li class="panel" data-index="5">6</li>
        </ul>
    </div>
    <div class="button-container">
        <ul id="buttons" class="clearfix">
            <li class="button" data-panel="0"></li>
            <li class="button" data-panel="1"></li>
            <li class="button" data-panel="2"></li>
            <li class="button" data-panel="3"></li>
        </ul>
    </div>
</div>

CSS

/* General Styling */
.outer-container {
    background: blue;
    overflow: hidden;
    width: 190px;
    margin: 0 auto;
}

ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

ul li {
    float: left;
    display: block;
}

.clearfix:after {
    content:" ";
    visibility: hidden;
    display: block;
    height: 0;
    clear: both;
}

/* Panel styling */
 .panel-container {
    width: 370px;
    /*fits all containers horizontally */
    position: relative;
    top: 0;
    left: 0;
}
.panel {
    background: red;
    height: 50px;
    width: 50px;
    margin: 10px 0 10px 10px;
    text-align: center;
}
/* Button styling */
 .button-container {
    margin: 0 auto;
    width: 96px;
}
.button {
    background: green;
    height:20px;
    width:20px;
    border-radius: 50%;
    margin: 5px 2px;
    cursor: pointer;
}

JavaScript

$(function () {
    $(".button").on("click", carousel);
})

function carousel() {
    var index = $(this).data("panel");
    var width = index * $("li[data-index=" + index + "]").outerWidth(true);
    scrollView(width);
}

function scrollView(pixels) {
    var $panelContainer = $(".panel-container");
    var shift = pixels * -1;
    $panelContainer.animate({
        "left": shift + "px"
    }, "slow");
}