JSFiddle - React, Tailwind, and code Playground

HTML

<button class="date-nav-prev">< Prev</button>
<button class="date-nav-next">Next ></button>
<div id="wrapper">
    <div id="slider">
        
        <div class="sliderItem" id="today">1</div>
        <div class="sliderItem" id="today">2</div>
        <div class="sliderItem" id="today">3</div>
    </div>
</div>

CSS

#wrapper{
    width:300px; 
    height:300px; 
    border:1px solid #333;
    position:relative; 
    overflow:hidden;
}
#slider {
    width: 1000px;
    height: 100%;
    position: absolute;
}
#slider div {
    width:300px; 
    height:100%; 
    float:left; 
}
#today{background:green;}
#yesterday {background:yellow;}
#daysAgo2 {background:orange;}

JavaScript

var sliderWidth = 300;
var slider = $('#slider');
var sliderCount = $('div', slider).length;
var cont =1;

$(document).ready(function() {
var numItems = $('.sliderItem').length;
   $('.date-nav-prev').hide();
});

slider.width(sliderCount * sliderWidth);



$('.date-nav-prev').click(function () { 
    $('#slider').animate({left: '+='+sliderWidth}, 500);
    cont--;
    hidePrev();
    hideNext();
});

$('.date-nav-next').click(function () {
    $('#slider').animate({left: '-='+sliderWidth}, 500);
    cont++;
    hidePrev();
    hideNext();
});


function hideNext(){

if(cont==sliderCount){
        $('.date-nav-next').hide();
    }else{
        $('.date-nav-next').show();
    }
}



function hidePrev(){
    
    if(cont>1){
        $('.date-nav-prev').show()
    }else{
        $('.date-nav-prev').hide()
    }
}