JSFiddle - React, Tailwind, and code Playground

by anil1095

HTML

<div class="pane">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
</div>
<button id="leftb">left</button>
<button id="rightb">right</button>

CSS

body, html {margin:0px; display:block; overflow-x:hidden;}
body {background:#999999;}

.pane {
    margin-top:30px;
    height:200px; 
    width:400px; 
    overflow-x: hidden;
    overflow-y: hidden;
    white-space:nowrap;
}

.pane .item {
    width:100px; 
    height:200px; 
    margin-left:10px;
    background:white;
    display:inline-block;
    *display:inline;
    *zoom:1;
    vertical-align:top;
}

JavaScript

$(function(){
    $('.pane').css('width',$(window).width()+'px');
    
    $('#leftb').click(function(){
        $('.pane').animate({scrollLeft : '-=300'});        
    });
    
    $('#rightb').click(function(){
        $('.pane').animate({scrollLeft : '+=300'});
    });
});