JSFiddle - React, Tailwind, and code Playground

by dylanjha

HTML

<div class='container'>
    <div class='wrapper clearfix'>
        <div class='el'>
            one
        </div>
        <div class='el'>
            two
        </div>
        <div class='el'>
            three
        </div>
        <div class='el'>
            four
        </div>
        <div class='el'>
            five
        </div>
    </div>
</div>
<div class='actions'>
  <button id='back'>Back</button>
  <button id='forward'>Forward</button>
</div>

CSS

.clearfix {
  *zoom: 1;
}

.clearfix:before,
.clearfix:after {
  display: table;
  line-height: 0;
  content: "";
}

.clearfix:after {
  clear: both;
}

.el {
    float: left;
    padding: 10px;
    background: orange;
    border: 1px solid black;
    margin: 0 4px;
    width: 50px;
    height: 20px;
    text-align: center;
}

.container {
    width: 300px;
    overflow: scroll;

}

.wrapper {
   width: 500px;
}

.actions {
    margin-top: 20px;
}

JavaScript

$(function(){
    var wrap = $('.wrapper');
    var con = $('.container');
    
    $('#back').click(function(){
        con.animate({ scrollLeft: wrap.position() - 15 }, 100);
        
    });

    $('#forward').click(function(){
        var mleft = wrap.css('margin-left').replace('px', '');
        var newMLeft = mleft - 15;
        wrap.css('margin-left', newMLeft);
    });

});