JSFiddle - React, Tailwind, and code Playground

HTML

<div id="mask">
    <ol>
        <li>Calendar 1</li>
        <li>Calendar 2</li>
        <li>Calendar 3</li>
        <li>Calendar 4</li>
        <li>Calendar 5</li>
        <li>Calendar 6</li>
    </ol
</div>
<a id="previousButton" href="#">Previous</a>
<a id="nextButton" href="#">Next</a>

CSS

*          {margin:0; padding:0; list-style:none; border:none; outline:none;}

#mask      {position:relative; height:200px; width:200px; overflow:hidden;}
#mask ol   {position:absolute; overflow:hidden; width:1200px; height:200px;}
#mask li   {float:left; display:inline; height:200px; width:200px; background:#090; overflow:hidden;}

JavaScript

$(document).ready(function(){
    $('#previousButton').click(function(){
        var currPosition = $('#mask ol').position().left;
        $('#mask ol').animate({
            left: currPosition + 200
        });
    });
    
    $('#nextButton').click(function(){
        var currPosition = $('#mask ol').position().left;
        $('#mask ol').animate({
            left: currPosition - 200
        });
    });
});