JSFiddle - React, Tailwind, and code Playground

HTML

<div id="con_out">	<a href="#" class="prev">Prev</a>
	<a href="#" class="next">Next</a>

    <div
    id="hsn">
        <ul>
            <li class="active">
                <p>1</p>
            </li>
            <li>
                <p>2</p>
            </li>
            <li>
                <p>3</p>
            </li>
            <li>
                <p>4</p>
            </li>
        </ul>
        <div class="clr"></div>
</div>
</div>

CSS

* {
    margin:0px;
    padding:0px;
}
ul, li {
    list-style:none;
}
a {
    text-decoration:none;
    display:block;
}
img {
    border:0px none;
}
.clr {
    clear:both;
}
body {
    font-size:16px;
    font-family:"Times New Roman", Times, serif;
}
#con_out {
    margin:auto;
    width:400px;
    background:#ccc;
    padding:0px 25px;
    position:relative;
}
#con_out a.prev, #con_out a.next {
    position:absolute;
    top:150px;
    color:#FF0000;
    text-decoration:underline;
    display:inline;
}
#con_out a.prev {
    left:0px;
}
#con_out a.next {
    right:0px;
}
#con_out a.prev:hover, #con_out a.next:hover {
    text-decoration:none;
}
#hsn {
    width:400px;
    height:400px;
    overflow:hidden;
}
#hsn ul li {
    float:left;
    line-height:400px;
    background:#00F;
}
#hsn ul li.active {
    background:#F00;
}
#hsn ul li p {
    color:#FFF;
    font-weight:bold;
    text-align:center;
    width:400px;
    font-size:100px;
}

JavaScript

$(document).ready(function () {

    var list_size = $("#hsn ul li").length;
    var list = $("#hsn ul li");

    var list_width = $("#hsn ul li").width();
    var all_list_width = list_width * list_size;

    var index = 1;

    if (index <= list_size) {
        $("a.prev").click(function () {
            index--;

            $("#hsn ul li").removeClass("active");
            $("#hsn ul li:nth-child(" + index + ")").css({
                "margin-left": "-=" + "400px"
            });

            alert(index);
        });

        $("a.next").click(function () {
            index++;
            $("#hsn ul li").removeClass("active");
            $("#hsn ul li:nth-child(" + index + ")").addClass("active").css({
                "margin-left": "+=" + "-400px"
            });

            alert(index);
        });
        if (index > list_size) {
            alert("greater");
        }
    }
});