JSFiddle - React, Tailwind, and code Playground

by Claudius

HTML

<div class="hs">
    <div class="left-arrow"><a href="#prev">Left</a></div>
    
    <div class="showcase">    
        <ul style="width:99999px;">
            <li style="background:#000;"></li>
            <li style="background:#222;"></li>
            <li style="background:#444;"></li>
            <li style="background:#666;"></li>
            <li style="background:#888;"></li>
            <li style="background:#aaa;"></li>
            <li style="background:#ccc;"></li>
            <li style="background:#eee;"></li>
        </ul>    
    </div>
    
    <div class="right-arrow"><a href="#next">Right</a></div>
</div>

CSS

.hs{
    width:900px;
    margin:auto;
}

.hs ul{
    list-style:none;
    margin:0;
    padding:0;    
}

.hs ul li{
    width:200px;height:200px;display:block;
    float:left;
    margin-right:12px;
}

.showcase {
    /* Set it so we could calculate the offsetLeft */
    position: relative;
    height: 197px;
    width: 836px;
    /* Add scroll-bars */
    overflow: auto;
    float:left;
}

.left-arrow{
    width:22px;
    height:197px;
    display:block;
    margin-right:10px;
    float:left;
}

.right-arrow{
    width:22px;
    height:197px;
    display:block;
    margin-left:10px;
    float:left;    
}

JavaScript

$(document).ready(function() {
    var div = $('div.showcase');
    var liNum = $(div).find('ul').children('li').length;
    var speed = 1000;
    var containerWidth = 424;
    var itemWidth = 212;
    $(div).css({
        overflow: 'hidden'
    });
    $('div.right-arrow').click(function(e) {
        $('div.left-arrow').show();
        if (($(div).scrollLeft() + containerWidth) < (liNum * itemWidth)) {
            $(div).animate({
                scrollLeft: '+=' + containerWidth
            }, speed);

        } else {
            $('div.right-arrow').hide();
        }
    });
    $('div.left-arrow').click(function(e) {
        $('div.right-arrow').show();
        if (($(div).scrollLeft() + containerWidth) > containerWidth) {
            $(div).animate({
                scrollLeft: '-=' + containerWidth
            }, speed);
        } else {
            $('div.left-arrow').hide();
        }

    });
});