JSFiddle - React, Tailwind, and code Playground

by ponyspy

HTML

<div class="navigate">
    <button class='left'><</button>
    <button class='right'>></button>
</div>
<div class="res">0</div>

<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>

CSS

.outer {
    white-space: nowrap;
    overflow: hidden;
    width: 600px;
    height: 260px;    
    position: absolute;
    top: 60px;
    bottom: 0;
    outline: 1px solid red;
}

.column {
    width: auto;
    height: 260px;
    margin-right: 10px;
    display: inline-block;
}

.inner {
    display: block;
    height: 100%;
}

.inner, img {
    height: 100%;
}

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': '-=400'
    }, 300);
});

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