JSFiddle - React, Tailwind, and code Playground

by Anam Ansari

HTML

<!-- <div class="pageContainer">
  <div class="cls1 pages">1</div>
  <div class="cls2 pages">2</div>
  <div class="cls3 pages">3</div>
  <div class="cls4 pages">4</div>
  <div class="cls5 pages">5</div>
  <div class="cls6 pages">6</div>
  <div class="cls7 pages">7</div>
</div>
 -->
<div class="sections">
  <div class="pageContainer">
    <div class="pagesList">
      <div class="page1 page">1</div>
      <div class="page1 page">2</div>
      <div class="page1 page">3</div>
      <div class="page1 page">4</div>
      <div class="page1 page">5</div>

    </div>
  </div>
</div>
<a id="next">next</a>
<a id="prev">prev</a>

JavaScript

$(document).ready(function() {
  $(".pagesList .page").each(function(e) {
    if (e != 0)
      $(this).hide();
  });

  $("#next").click(function() {
    if ($(".pagesList .page:visible").next().length != 0)
      $(".pagesList .page:visible").next().show().prev().hide();
    else {
      $(".pagesList .page:visible").hide();
      $(".pagesList .page:first").show();
    }
    return false;
  });

  $("#prev").click(function() {
    if ($(".pagesList .page:visible").prev().length != 0)
      $(".pagesList .page:visible").prev().show().next().hide();
    else {
      $(".pagesList div:visible").hide();
      $(".pagesList div:last").show();
    }
    return false;
  });
});