JSFiddle - React, Tailwind, and code Playground

by Palpatim

HTML

<div class="wrapper">
                <div class="inner">Apple1</div>
                <div class="inner">Apple2</div>
                <div class="inner">Apple3</div>
                <div class="inner">Apple4</div>
                <div class="inner">Apple5</div>
                <div class="inner">Apple6</div>
                <div class="inner">Apple7</div>
                <div class="inner">Apple8</div>
                <div class="inner">Apple9</div>
                <div class="inner">Apple10</div>
                <div class="inner">Apple11</div>
                <div class="inner">Apple12</div>
                <div class="inner">Apple13</div>
                <div class="inner">Apple14</div>
                <div class="inner">Orange1</div>
                <div class="inner">Orange2</div>
                <div class="inner">Orange3</div>
                <div class="inner">Orange4</div>
                <div class="inner">Orange5</div>
                <div class="inner">Orange6</div>
                <div class="inner">Orange7</div>
                <div class="inner">Orange8</div>
                <div class="inner">Orange9</div>
</div>

<div id="scroll-left">Scroll-to-Left</div>
        <div id="scroll-right">Scroll-to-Right</div>

CSS

body, div {
    margin:0;
    padding:0;
}

.wrapper {
    overflow:hidden;
    white-space:nowrap;
    position:relative;
    border:2px solid #F00;
}

.inner {
    display:inline-block;
    padding-right:48px;
    border:1px solid #000;
}


#scroll-left, #scroll-right {
    cursor:pointer;
}

JavaScript

$(document).ready(function() {
    var wrapper = $('.wrapper');
    var children = $('.inner', wrapper);
    $('#scroll-left').click(function() {
        wrapper.animate({left: '-=100px'}, 500);
        if (children[0].visible()) {
            var e = children.shift();
            children.push(e);
            
        }
    });

    $('#scroll-right').click(function() {
        wrapper.animate({left: '+=100px'}, 500);
    });
});