JSFiddle - React, Tailwind, and code Playground

by codef0rmer

HTML

<div class='wrapper'>
    <div class='left'>Left</div>
<div class='contentWrapper'>
    <div class='slide'>
        <div>amit</div>
        <div>amar</div>
        <div>prerna</div>
        <div>Abhishek</div>
        <div>aashish</div>
        <div>Rahul</div>
        <div>Viral</div>
        <div>Supriya</div>
        <div>Selvi</div>
    </div>
</div>
<div class='right'>Right</div>
<div class='clear'></div>
</div>

CSS

div.wrapper { width: 400px; border: 1px solid red; }
div.left, div.right { float: left; }
div.contentWrapper { 
    float: left;
    width: 300px; 
    height: 35px;
    border: 1px solid blue; 
    white-space: nowrap;
    overflow: hidden;
    padding: 5px 5px 5px 5px;
}
div.slide { width: 540px; background: yellow;}
div.slide div {
    float: left;
   margin-left:  10px;
   margin-top: 10px;
   border: 1px solid orange;
   width: 60px;
    text-align: center;
}
div.clear { clear: both; }

JavaScript

// PHN20 - Options navigations

$(function () {
    var offset = 0, number_of_dates = 9;
    
    $('div.left').click(function() {
        offset -= (60 * 4);
    
        if (offset < 0) {
            offset = 0; // don't exceed this limit
        }
    
        $('div.slide').animate({
            'margin-left': offset + 'px'
        });
    });
    
    $('div.right').click(function () {
        offset += (60 * 4); // add a total width of 5 items to the scrolling amount

    if (offset > (number_of_dates * 60)) {
        offset = number_of_dates * 60; // don't exceed this limit
    }

    $('div.slide').animate({
        'margin-left': '-' + offset + 'px'
    });
    });        
});