JSFiddle - React, Tailwind, and code Playground

by CodeMaverick

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>
   <li class="slider"> Item-16 </li>
</ul>

<button id="next"> Next </button>

CSS

.slider { display: none; }
#next { display: none; }

JavaScript

// Cache elements
var $list = $("ul li");
var $next = $("#next");

// Define the interval of li to display
var start = 0;
var end = 4;

// Fade In on load
$next.fadeIn(500);
$list.slice(start,end).fadeIn(500);

$next.on("click", function() { 

  // Define the next interval of four li to show
  start += 4;
  end += 4;

  // Test to detect the end of list and reset next interval
  if( start >= $list.length ){
    start = 0;
    end = 4;
  }

  // Fade Out next button and current LI
  $next.stop(true,true).fadeOut(500);
  $list.stop(true,true).fadeOut(500);
  
  // Fade In next button and next LI
  $list.promise().done(function() {
    $list.slice(start,end).stop(true,true).fadeIn(500);
    $next.stop(true,true).fadeIn(500);
  });

});