JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li class="slider">Item-1</li>
    <li class="slider">Item-2</li>
    <li class="slider">Item-3</li>
    <li class="slider">Item-4</li>
    <li class="slider">Item-5</li>
    <li class="slider">Item-6</li>
    <li class="slider">Item-7</li>
    <li class="slider">Item-8</li>
    <li class="slider">Item-9</li>
    <li class="slider">Item-10</li>
    <li class="slider">Item-11</li>
    <li class="slider">Item-12</li>
    <li class="slider">Item-13</li>
    <li class="slider">Item-14</li>
    <li class="slider">Item-15</li>
</ul>
<button>next</button>

JavaScript

$(document).ready(function() {
    var $lis = $("li.slider"),
        start = 0;

    $lis.hide()
        .slice(start, start+4).show();

    $("button").click(function() {
        $lis.slice(start, start+4)
            .fadeOut(500)
            .promise()
            .done(function() {
                start += 4;
                if (start > $lis.length)
                   start = 0;
                $lis.slice(start, start+4).fadeIn();
        });
    });    
});