JSFiddle - React, Tailwind, and code Playground

HTML

<div id="scroller">
        <ul>
            <li>Onemm</li>
            <li>Two</li>
            <li>Three</li>
            <li>Four</li>
            <li>Five</li>
            <li>Six</li>
            <li>Seven</li>
            <li>Eight</li>
            <li>Nine</li>
            <li>Ten</li>
            <li>Eleven</li>
            <li>Twelve</li>
        </ul>
        <span class="control" id="leftControl">Prev</span>
        <span class="control" id="rightControl">Next</span>
    </div>

CSS

#scroller { font: 12px/16px Arial; width: 326px; overflow:hidden;}
        #scroller ul { margin:0; padding:0; overflow:hidden; }
        #scroller ul li { width:100px; border:1px solid #ccc; height:50px; float:left; margin:0 10px 0 0; }
        span { cursor: pointer; }

JavaScript

var currentPosition = 0,
        slideWidth = 112,
        slides = $('#scroller ul li'),
        numberOfSlides = slides.length;
        scrollerContainer = $('#scroller ul'),
        nextButton = $('.next'),
        previousButton = $('.prev');
        
    $(scrollerContainer).css('width', slideWidth * numberOfSlides);
    
    manageControls(currentPosition);
    
    $('.control').click(function(){
        currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
        manageControls(currentPosition);
        $(scrollerContainer).animate({
            'marginLeft' : slideWidth*(-(currentPosition*3))
        });
    });
    
    function manageControls(position){
        if(position==0){ $('#leftControl').hide() }
        else{ $('#leftControl').show() }
        
        if((position*3)==numberOfSlides-1 || (position*3)==numberOfSlides-3 || (position*3)==numberOfSlides-2) { $('#rightControl').hide() }
        else{ $('#rightControl').show() }
    }