JSFiddle - React, Tailwind, and code Playground

by jockebq

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

#container {
/*    width:300px;
    height: 60px; */
    overflow: hidden;
}

#datafetch-wrap {
    position: absolute;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    top: 100px;
    text-align: center;
    font-family: "Open Sans", Arial, Verdana;
    font-size: 14px;
    display: inline-block;
    color: #B7B7B7;
    height: 400px; /* 40px - more place for scrollbar, is hidden under parent box */
    white-space: nowrap;
    overflow: hidden;
}

#datafetch {
  height: 100%;
  margin-bottom: -50px;
  padding-bottom: 50px;
  overflow-y: hidden;
  overflow-x: scroll;
}

.module {
    display: inline-block;
    width: 180px;
    height: 180px;
    line-height: 15px;
    text-align: center;
    background: #ddd;
    vertical-align: top;
    background: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    box-sizing: border-box;
    padding: 25px;
}
.module + .module {
    margin-left: 5px
}


.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();
        }

    });
});