限制循环循环次数

    <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>

The code above is used to generate objects based on how many the data is on the database. To better understand it here is a picture of the system:

The problem is when the data exceed 8, the objects do not go to the next page. The reason is that I dont know how to do that.

For example I clicked the right arrow ">" the code must go to the second page and so on with the rest of the object.

Can anyone help me or can anyone provide me with the syntax? Thanks.

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";