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">Today's Actions</div>
                <div class="sliderItem" id="today">Today's ASDAS</div>
        <div class="sliderItem" id="today">Today's ASDASGSG</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

$(document).ready(function() {
var sliderWidth = 300;
var slider = $('#slider');
var sliderCount = $('div', slider).length;


var numItems = $('.sliderItem').length;

if (numItems <= 1)
{
$('.date-nav-prev').hide();
$('.date-nav-next').hide();
}
    var numItems = $('.sliderItem').length;
    


slider.width(sliderCount * sliderWidth);
var counter = 0;

$('.date-nav-prev').click(function () {
    if(counter > 0 ){
        counter--;
    $('#slider').animate({left: '+='+sliderWidth}, 500);
    }
});

$('.date-nav-next').click(function () {
    counter++;
    
    if(counter < numItems){
    $('#slider').animate({left: '-='+sliderWidth}, 500);
    }
    else{
        counter = 0;
        
       $('#slider').animate({left: '+='+sliderWidth * sliderCount - 150},500);
   
    }
});
    });