JSFiddle - React, Tailwind, and code Playground

by ponyspy

HTML

<div class="outer">
    <div class="inner">
        <div class="style">
           <div class="column"></div>
           <div class="column"></div>
           <div class="column"></div>        
        </div>
        <div class="style">
           <div class="column"></div>
           <div class="column"></div>
           <div class="column"></div>        
        </div>
    </div>    
</div>
<div class="navigate">
    <button class='left'><</button>
    <button class='right'>></button>
</div>
<div class="res">0</div>

CSS

.outer {
  white-space: nowrap;
  overflow: hidden;    
  width: 160px;
}

.column {
    width: 160px;
    height: 160px;
    margin-right: 10px;
    background-color: blue;
    display: inline-block;
}

.inner, .style {
    display: inline-block;
}

.column:nth-child(odd) {
    background-color: red;
}

JavaScript

$('.outer').on('scroll', function() {
    var outer_offset = $(this).offset().left;
    $('.column').each(function() {
        var $this = $(this);
        var column_offset = $this.offset().left;
        outer_offset >= column_offset
            ? $('.res').text($this.index('.column'))
            : false;
    });
});

$('.left').on('click', function() {
    $('.outer').animate({
        'scrollLeft': '-=175'
    }, 300);
});

$('.right').on('click', function() {
    $('.outer').animate({
        'scrollLeft': '+=175'
    }, 300);
});