JSFiddle - React, Tailwind, and code Playground

by Can

HTML

<script src="http://www.webdesignerwall.com/demo/scrollto-demo/js/jquery.scrollTo-min.js"></script>
<div class="wrap">
    <div class="layer">
        <div class="post"></div>
        <div class="post"></div>
        <div class="post"></div>
        <div class="post"></div>
        <div class="post"></div>
        <div class="post"></div>
        <div class="post"></div>
        <div class="post"></div>
        <div class="post"></div>
        <div class="post"></div>
        <div class="post"></div>
        <div class="post"></div>
        <div class="post"></div>
        <div class="post"></div>
        <div class="post"></div>
        <div class="post"></div>
    </div>
</div>

<div id="nav">
    <span id="prev" class="prev" style="cursor:pointer;"> <-- </span>
        .....
        <span id="next" class="next" style="cursor:pointer;"> --> </span>
        </div>

CSS

.wrap {
    
    width:300px;
    height :70px;
    overflow:hidden;
    background:#000;
    
    
}

.layer {
    width: 990px;
    height :60px;
    
    
    
}

.post {
    margin : 10px;
    float: left;
    width: 50px;
    height :50px;
    background : #f00;
}

JavaScript

function scrollToPosition(element) {
    if (element !== undefined) {
        $(".wrap").scrollTo(element, 800, {
            margin: true
        });
    }
}

$(function() {

    //Create an Array of posts
    var posts = $('.post');
    var position = 0; //Start Position
    var next = $('#next');
    var prev = $('#prev').hide();

    //Better performance to use Id selectors than class selectors
    next.click(function(evt) {
        //Scroll to next position
        prev.show();
        scrollToPosition(posts[position += 1]);
        if (position === posts.length - 1) {
            next.hide();
        }
    });

    prev.click(function(evt) {
        //Scroll to prev position    
        next.show();
        scrollToPosition(posts[position -= 1]);
        if (position === 0) {
            prev.hide();
        }
    });

});