JSFiddle - React, Tailwind, and code Playground

HTML

<div class="guide"></div>
        <div id="content"><div id="inner">
                <figure>
                    <img src="http://www.w3schools.com/images/pulpit.jpg" alt="Pulpit rock" width="304" height="228">
                    <figcaption>A cheeky macaque, Lower Kintaganban River, Borneo. Original by Richard Clark</figcaption>
                </figure>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla semper mi velit, sit amet elementum libero ultrices sed. Praesent ut fermentum neque. Etiam mauris sem, placerat ac feugiat a, pulvinar sed nulla. Nam id augue erat. Sed a neque commodo, fringilla magna a, sollicitudin nisl. Sed tellus nisi, pretium id turpis id, venenatis hendrerit lectus. Maecenas mauris enim, pulvinar a porttitor eu, volutpat sit amet magna. Sed sit amet orci libero. Pellentesque eu elit sit amet felis lacinia convallis. Cras vel dui egestas, vehicula nulla nec, commodo quam. Pellentesque ligula leo, lobortis vitae eros in, pulvinar ornare elit. Suspendisse augue tortor, imperdiet ut ipsum id, pulvinar rhoncus odio.
</p>
<p>
Quisque in neque tempus, consectetur erat at, eleifend diam. Aenean bibendum sollicitudin velit, non dignissim eros tristique vel. Ut a risus vitae quam lobortis suscipit ut eget ipsum. Maecenas quis lorem non enim condimentum dictum vel sed augue. Curabitur scelerisque ut lorem ac fringilla. Suspendisse a condimentum eros. Phasellus luctus ipsum non arcu eleifend consequat ac ut massa. Nunc sed tortor sed orci viverra luctus. Mauris rutrum quam id velit aliquet, sed vestibulum erat dictum. Donec adipiscing mauris at nunc interdum auctor. Sed venenatis dictum justo, in condimentum orci interdum id. Curabitur id dignissim mi. Praesent blandit ac eros in faucibus. Ut commodo euismod massa, quis aliquam tortor euismod volutpat. Suspendisse vehicula nulla in adipiscing vehicula. Vivamus dapibus tempus justo, sit amet suscipit ante.
</p>
<p>
Integer mauris turpis, pharetra feugiat nisi ac, mattis consectetur...

CSS

#prev,  #next, #infopage {
                position: fixed;
                width: 50px;
                height: 50px;
                background-color: yellow;
                margin: 10px;
            }
            #prev  {
                top: 600px;
                left: 0px;
            }
            #next  {
                top: 600px;
                left: 60px;
            }
            #infopage  {
                top: 600px;
                left: 120px;
                background-color: lavender;
            }
            .guide {
                position: fixed;
                top: 0px;
                left: 0px;
                width: 1000px;
                height: 500px;
                -webkit-box-sizing: border-box;
                border: 20px solid red
            }
            #content {
                position: fixed;
                top: 0px;
                left: 0px;	
                width: 1000px;
            }
            #inner {
                -webkit-column-count: 2;
                -webkit-column-gap: 20px;
                -webkit-column-width: 490px;
                height: 500px; 
            }

JavaScript

var cntWidth, // content total length
                areaWidth = 1000, // visible area
                columnWidth = 490, // 1 columns minus gap
                pageTot, // total number of pages
                pageCur = 1, // active page
                gap = 20, // space between columns
                animDuration = 400, /* jquery default 400 */
                contentPos = null; // content left position

            function renderInfoPage() {
                var elm = $('#infopage');
                elm.html('page ' + pageCur + ' of ' + pageTot);
            }

            function getPositionDom() {
                // keep in memory dom position
                var elm = $('#content');
                var pos = elm.offset();
                contentPos = pos.left;
            }

            // has content a jquery animation queue?
            function hasContentAnimateQueue() {
                var queueN = $('#content').queue().length;
                if (queueN !== 0) {
                    return true;
                } else {
                    return false;
                }
            }

            function next() {
                if (pageTot > 0 && pageCur < pageTot) {
                    if (!hasContentAnimateQueue()) {
                        var elm = $('#content');
                        var newPos = contentPos - areaWidth - gap;
                        contentPos = newPos;
                        elm.animate({left: newPos + 'px'}, animDuration);
                        pageCur++;
                        renderInfoPage();
                    }
                }
            }
            function prev() {
                if (pageCur > 1) {
                    if (!hasContentAnimateQueue()) {
                        var elm = $('#content');
                        var newPos = contentPos + areaWidth + gap;
                        contentPos = newPos;
                        //elm.css({left: newPos + 'px'}); // use this for no...