JSFiddle - React, Tailwind, and code Playground

by ponyspy

HTML

<div class="outer">
    <div class="inner">
           <img src='http://prirodasibiri.ru/images/news/pic/5300_1.jpg' class="column">
    <img src='http://www.nimbusmens.com.ua/wp-content/uploads/2013/11/Keltskiy-goroskop-zhivotnyh-Medved.jpg' class="column">
    <img src='http://timoshin.ucoz.ru/_ph/7/270841940.jpg' class="column">                       
    </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: 100%;
}

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

.inner {
    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': '-=330'
    }, 300);
});

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