Javascript分页不'；t工作

我需要分页方面的帮助，因为 下面的javascript代码不能正常工作。 第一页显示所有元素，即使在代码中设置为最大5， 当我点击下一页时，什么都没有显示，我做错了什么？ 我想我选错了选择器“galleryItem”。 谢谢你给我解释。 HTML代码

<div class="container">
            <!-- content tabs -->
            <div class="tab-content">
                <div class="tab-pane fade show active" id="tab-1" role="tabpanel" aria-labelledby="1-tab">
                    <div class="row row--grid">
                        <!-- card -->

                        <?php
$sql = "SELECT id,gatunek, title, photo FROM cruda WHERE gatunek='Animation'";
$result = mysqli_query($conn, $sql);

if (mysqli_num_rows($result) > 2) {
  // output data of each row
  while ($row = $result->fetch_assoc()) { ?>
                        <div class="col-6 col-sm-4 col-md-3 col-xl-2 sort">
                            <div class="card">
                                <div class="card__cover">
                                <img src="admin-pnel/<?= $row['photo']; ?>" alt="">
                                    <a href="details.html" class="card__play">
                                        <i class="icon ion-ios-play"></i>
                                    </a>
                                    <span class="card__rate card__rate--green">8.4</span>
                                </div>
                                <div class="card__content">
                                <h3 class="card__title"><a href="details.html"><?= $row['title']; ?></a></h3>
                                    <span class="card__category">
                                    <a href="#"><?= $row['gatunek']; ?></a>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <?php } }?>
                        <!-- end card -->

<div class="pagination">
            <div class="prev">Prev</div>
            <div class="page">Page <span class="page-num"></span></div>
            <div class="next">Next</div>
        </div>

 const galleryItems=document.querySelector(".tab-content").children;
 const prev=document.querySelector(".prev");
 const next=document.querySelector(".next");
 const page=document.querySelector(".page-num");
 const maxItem=5;
 let index=1;

  const pagination=Math.ceil(galleryItems.length/maxItem);
  console.log(pagination)

  prev.addEventListener("click",function(){
    index--;
    check();
    showItems();
  })
  next.addEventListener("click",function(){
    index++;
    check();
    showItems();  
  })

  function check(){
     if(index==pagination){
        next.classList.add("disabled");
     }
     else{
       next.classList.remove("disabled");   
     }

     if(index==1){
        prev.classList.add("disabled");
     }
     else{
       prev.classList.remove("disabled");   
     }
  }

  function showItems() {
     for(let i=0;i<galleryItems.length; i++){
        galleryItems[i].classList.remove("show");
        galleryItems[i].classList.add("hide");


        if(i>=(index*maxItem)-maxItem && i<index*maxItem){
          // if i greater than and equal to (index*maxItem)-maxItem;
          // means  (1*8)-8=0 if index=2 then (2*8)-8=8
          galleryItems[i].classList.remove("hide");
          galleryItems[i].classList.add("show");
        }
        page.innerHTML=index;
     }

        
  }

  window.onload=function(){
    showItems();
    check();
  }