JSFiddle - React, Tailwind, and code Playground

by Ian Roberts

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<button class="prev"><</button>
<button class="next">></button>
<input id="inputScrollIndex" type="text"></input>
<button id="scrollIndex">Scroll to index</button>
<div class="source-container">
    <div class="wrapper">
        <div class="scroll-time" id="one">times</div>
        <div class="scroll-time" id="two">2</div>
        <div class="scroll-time" id="three">3</div>
        <div class="scroll-time" id="four">4</div>
        <div class="scroll-time" id="five">5</div>
        <div class="scroll-time" id="six">6</div>
        <div class="scroll-time" id="seven">7</div>
        <div class="scroll-time" id="eight">8</div>
        <div class="scroll-time" id="nine">9</div>
        <div class="scroll-time" id="ten">10</div>
        <div class="scroll-time" id="ele">11</div>
        <div class="scroll-time" id="twe">12</div>
    </div>
</div>
<div class="source-container">
    <div class="wrapper">
        <div class="scroll-time" id="one">sessions</div>
        <div class="scroll-time" id="two">2</div>
        <div class="scroll-time" id="three">3</div>
        <div class="scroll-time" id="four">4</div>
        <div class="scroll-time" id="five">5</div>
        <div class="scroll-time" id="six">6</div>
        <div class="scroll-time" id="seven">7</div>
        <div class="scroll-time" id="eight">8</div>
        <div class="scroll-time" id="nine">9</div>
        <div class="scroll-time" id="ten">10</div>
        <div class="scroll-time" id="ele">11</div>
        <div class="scroll-time" id="twe">12</div>
    </div>
</div>
<button class="prev"><</button>
<button class="next">></button>

CSS

.wrapper{
    width: 5100px;
}

div.scroll-time {
    border-left : 5px solid black;
    border-top : 5px solid black;
    border-bottom: 5px solid black;
    height: 500px;
    width: 400px;
    float: left;
    display: inline-block;
}
.wrapper :last-child{
    border-right: 5px solid #333;
}

.source-container {
    height: 530px;
    width: 510px;
    overflow-x: scroll;
    overflow-y: hidden;
}

JavaScript

//add next & prev buttons

var currentElement = $(".wrapper > div:nth-child(2)");
var onScroll = function () {
    //get the current element
    var container = $(".source-container");
    var wrapper = $(".wrapper");
    var children = wrapper.children();
    var position = 0;
    for (var i = 0; i < children.length; i++) {
        var child = $(children[i]);
        var childLeft = container.offset().left < child.offset().left;
        if (childLeft) {
            currentElement = child;
            console.log(currentElement)
            return;
        }
    }
}

//not needed - scroll to index search
//var indexClick = function () {
//    console.log($("#inputScrollIndex").val())
//    var index = parseInt($("#inputScrollIndex").val(), 10) - 1;
//    if (index < 1) {
//        index = 0;
//    }
//    console.log(index);
//    scrollToIndex(index);
//}
//end not needed - scroll to index search

var scrollToIndex = function (index) {
    var element = $($(".wrapper").children()[index]);
    scrollToElement(element);
}

var scrollToElement = function ($element) {
    var container = $(".source-container");
    var wrapper = $(".wrapper");
    var children = wrapper.children();
    var width = 0;
    for (var i = 0; i < children.length; i++) {
        var child = $(children[i]);
        if (child.get(0) == $element.get(0)) {
            if (i == 0) {
                width = 0;
            }
            container.animate({
                scrollLeft: width
            }, 700, 'easeInOutExpo');
            onScroll();
        }
        if (child.next().length > 0) {
            //make sure we factor in borders/padding/margin in height
            width += child.next().offset().left - child.offset().left
        } else {
            width += child.width();
        }
    }
}

var next = function (e) {
    scrollToElement(currentElement);
}

var prev = function (e) {
    var container = $(".source-container");
    if (currentElement.prev().length > 0) {
        if...