限制循环循环次数

Question

    <div class="teachers1">
      <div class="teamySlides">
        <div class="yourteachers">
          <?php
            while ($row = mysqli_fetch_array($query)) {
              echo '<a class="teachers" href="teacherinfo.php?id=' . $row['IDNum'] . '">
                      <img src="pictures/blank photo.png" class="teacherpic"><br>
                      <span>'.$row['LastName'].'</span><br>
                      <span>'.$row['Grade'].' - </span>
                      <span>'.$row['Section'].'</span>
                    </a>';
            }
          ?>
        </div>
      </div>
      <a class="prev" onclick="tplusSlides(-1)">❮</a>
      <a class="next" onclick="tplusSlides(1)">❯</a>
      <div class="dot-container">
        <span class="tdot" onclick="tcurrentSlide(1)"></span> 
        <span class="tdot" onclick="tcurrentSlide(2)"></span> 
      </div>
    </div>

上面的代码用于根据数据库中的数据量生成对象。为了更好地理解它，这里是系统的图片：

问题是，当数据超过8个时，对象不会转到下一页。原因是我不知道该怎么做。

例如，我单击了向右箭头“>”，该代码必须转到第二页，依此类推，然后单击该对象的其余部分。

任何人都可以帮助我，或者任何人都可以为我提供语法吗？谢谢。

Javascript：

var ti;
    var tslides = document.getElementsByClassName("yourteachers");
    var tdots = document.getElementsByClassName("tdot");
    if (n > tslides.length) 
      tslideIndex = 1
    if (n < 1) 
      tslideIndex = tslides.length
    for (ti = 0; ti < tslides.length; ti++) 
        tslides[ti].style.display = "none";  
    for (ti = 0; ti < tdots.length; ti++) 
      tdots[ti].className = tdots[ti].className.replace(" active", "");
    tslides[tslideIndex-1].style.display = "block";  
    tdots[tslideIndex-1].className += " active";