Javascript 使用显示MySQL图像的弹出窗口上的后退/前进按钮导航？

我有一个页面，里面充满了从MySQL表中提取的图像。单击其中一个图像时，将显示一个模式弹出窗口。此模式窗口包含后退和前进按钮，如下所示：

我希望能够通过这些按钮遍历MySQL图像

以下是获取图像并将其显示在页面上的php代码：

<div id="screenings">

<?php
    ...
    //connect to database & table
    ...
    while ($row = mysqli_fetch_array($result)){?>
        <div class='img_div' ng-click="vm.openModal('custom-modal-1')">
             <img class='modal_img img_screenings' src='images/<?php echo $row['image']."' >";
            echo "<p id='movie_p' align='center'>" .$row['title']."</p>";
            echo "<p id='screenings_p' align='center'>" .$row['year']."</p>";
            echo "<p id='location_p' align='center'>" .$row['duration']."</p>";
        echo "</div>";
     }
 ?>

 </div>

";
echo“
”$row['title']。“
”；
echo“
”$row['year']。“
”；
echo“
”$row['duration']”“
”；
回声“；
}
?>

我是否需要获取

$row['id']

并将其存储在一个隐藏变量中，然后使用该变量进行前后迭代？或者是否有一个

下一个子项

上一个子项

函数可以用于此功能？jQuery将是首选解决方案，因为此页面底部已经有一些jQuery脚本，但我愿意接受任何想法

---

编辑或者，当我从MySQL表中提取图像文件路径时，我可以将它们存储在一个数组中？我该怎么做呢？

为什么不使用jquery图像滑块ui呢？我觉得只需几行代码就可以完成这项工作。