JSFiddle - React, Tailwind, and code Playground

by shlomo hassid

HTML

<div id="arrow">
    <a class="next">next</a>
    <a class="previous">prev</a>
</div>
<section style="background-color:green">...</section>
<section style="background-color:blue">...</section>
<section style="background-color:red">...</section>

CSS

html,body { height:100%; margin:0; padding:0;; white-space:nowrap; font-size:0; }
section {
    font-size:14px;
    min-height:100%;
    min-width:900px;
    display:inline-block;
}
#arrow {
    font-size:14px;
    position:fixed; 
    left:0; 
    top:0;
    background-color:black;
    color:white;
}
#arrow a{
    display:inline-block;
    padding:10px 20px;
    cursor:pointer;
}

JavaScript

$(function(){
    
    var pagePositon = 0,
        sectionsSeclector = 'section',
        $scrollItems = $(sectionsSeclector),
        offsetTolorence = 30,
        pageMaxPosition = $scrollItems.length - 1;
    
    //Map the sections:
    $scrollItems.each(function(index,ele) { $(ele).attr("debog",index).data("pos",index); });

    // Bind to scroll
    $(window).bind('scroll',leftPos);
    
    //Move on click:
    $('#arrow a').click(function(e){
        if ($(this).hasClass('next') && pagePositon+1 <= pageMaxPosition) {
            pagePositon++;
            $('html, body').stop().animate({ 
                  scrollLeft: $scrollItems.eq(pagePositon).offset().left
            }, 300);
        }
        if ($(this).hasClass('previous') && pagePositon-1 >= 0) {
            pagePositon--;
            $('html, body').stop().animate({ 
                  scrollLeft: $scrollItems.eq(pagePositon).offset().left
              }, 300);
            return false;
        }
    });
    
    //Update position func:
    function leftPos(){
       var fromLeft = $(this).scrollLeft();
       var $cur = null;
        $scrollItems.each(function(index,ele){
            if ($(ele).offset().left < fromLeft + offsetTolorence) $cur = $(ele);
        });
       if ($cur != null && pagePositon != $cur.data('pos')) {
           pagePositon = $cur.data('pos');
       }     
    }
    
});