JSFiddle - React, Tailwind, and code Playground

HTML

<div class="contentContainer">
    <div id="slider">
        <div class="header">
            <div data-slide="1">
                1
            </div>
            <div data-slide="2">
                2
            </div>
            <div data-slide="3">
                3
            </div>
        </div>
        <div class="footer">
            <div class="navigation">
                <ul>
                    <li class="itemLinks" data-p="1"></li>
                    <li class="itemLinks" data-p="2"></li>
                    <li class="itemLinks" data-p="3"></li>
                </ul>
            </div>
            <div class="btn" data-arrow="left">leftArrow</div>
            <div class="btn" data-arrow="right">rightArrow</div>
        </div>
    </div>    
</div>

CSS

body {
    background: #333;
}
.contentContainer {
    background: #444;
    text-align: center;
}
.contentContainer li {
    list-style: none;
    display: inline-block;
}
#slider .header {
    position: relative;
    left: 0;
    height: 100px;
    transition: left .8s ease-in-out;
}
#slider [data-slide] {
    float: left;
    width: 100%;
    height: 100%;
    background: red;
    font: 400 50px Arial;
    color: #fff;
}
#slider .footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 45px;
    margin: 0 auto;
}
#slider [data-p] {
    margin-right: 5px;
    width: 10px;
    height: 10px;
    background: #000;
    border: 3px solid #fff;
    border-radius: 50%;
    cursor: pointer;
}
#slider [data-p].active {
    background: green;
    cursor: default;
}

JavaScript

$(document).ready(function() {
    var ww, wh, p, ln;
    
    ww = $(window).width();
    wh = $(window).height();
    ln = $("#slider [data-p]").length;
    
    $("html, .contentContainer").css({
        overflow: "hidden"
    });
    $("#slider [data-slide], .contentContainer").css({
        width: ww,
        height: wh
    });
    $("#slider .header").css({
        "width": ww * 6
    });
    
    p = 0;
    $("#slider [data-p]").first().addClass("active");
    $("#slider [data-p]").filter(function(){
        this.setAttribute("data-w", -(ww * p));
        p++;
    });
    $("#slider [data-p]").on("click", function() {
        var w, p;
        w = this.dataset.w;
        p = this.dataset.p;

        $("#slider .header").css({
            left: w + "px"
        });
        $(this).addClass("active").siblings().removeClass("active");
    });
    
    $("#slider [data-arrow]").on("click", function(){
        var p, w, arrow = this.dataset.arrow;
        
        p = $("#slider [data-p].active").data("p");
        
        $("#slider [data-p]").removeClass("active");
        if (arrow == "left"){
            if (p == 1){
                w = $('#slider [data-p]').last().data("w");
                $('#slider [data-p]').last().addClass("active");
            } 
            else {
                p = p-1;
                w = $("[data-p="+p+"]").data("w");
                $("[data-p="+p+"]").addClass("active");
            }
        }
        else {
            if (p == ln){
                w = $('#slider [data-p]').first().data("w");
                $('#slider [data-p]').first().addClass("active");
            }
            else {
                p = p+1;
                w = $("[data-p="+p+"]").data("w");
                $("[data-p="+p+"]").addClass("active");
            }
        }
        $("#slider .header").css({
            left: w + "px"
        });
    });
});