JSFiddle - React, Tailwind, and code Playground

HTML

<button id='move'>Next Slide</button>
<div class="wrapper">
    <div class="slider">
        <div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div>
    </div>
</div>

CSS

.wrapper {
    margin: 10px;
    border: 1px solid black;
    border-radius: 30px;
    overflow:hidden;
    width: 100px;
    height: 100px;
}
.slider {
    -webkit-transition: all 1s;
    transition: all 1s;
    -webkit-transition: all 1s;
    width: 800%;
    background-color: red;
    height: inherit;
}
.item {
    display:inline-block;
    width: 100px;
    height: inherit;
    margin: 0px;
}
.item:nth-child(odd) {
    background-color:yellow;
}
.item:nth-child(even) {
    background-color: green;
}

JavaScript

var move = function () {
    if (move.slide_num < 4) {
        var slider = $('.slider');
        var new_position = ((move.slide_num - 1) * 100 * -1) + (100 * -1);
        console.log(new_position);
        move.slide_num++;

        //Add all transforms necesarry to move the slider.
        for (var i = 0; i < move.transforms.length; i++) {
            slider.css('' + move.transforms[i], 'translateX(' + new_position + 'px)');
        }
    }
}
$(function () {
    $("#move").click(function () {
        move();
    });
    move.slide_num = 1;
    move.transforms = ["-webkit-transform", "-moz-transform", "-ms-transform", "-o-transform", "transform"];
});