JSFiddle - React, Tailwind, and code Playground

by stto3703

HTML

<button id="leftbutton" data-dir='prev' class="button"><</button>
<ul id="basepattern">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
</ul>
 <button id="rightbutton" data-dir='next' class="button">></button>

CSS

.button   {
    border:1px solid green;
    width:20px;
    height:20px;
}

#basepattern li   {
    list-style: none;
    display: none;
}
#basepattern li.shown {
    display: block;
}

JavaScript

var items = $('li'),
    pageSize = 3,
    numPages = Math.ceil(items.length / pageSize),
    currentPage = -1;

$('button').on('click', function () {
    
    var next = $(this).data().dir === 'next' ?        
        Math.min(currentPage + 1, numPages - 1) :
        Math.max(currentPage - 1, 0);
    
    load(currentPage = next);    
});

var load = function (page) {
    items.removeClass('shown');
    items.slice(page * pageSize, page * pageSize + pageSize).addClass('shown');;
};

$('#rightbutton').click();