Javascript 模态库中的上一个和下一个按钮不'；行不通

我找到了模态画廊的例子，并试图适应我的需要，但现在我有一个问题，与上一个下一个按钮。。。你有什么建议吗？（javascript新手）

HTML

&时代；

当我点击最后一张图片（数字8）打开模态时，一切正常，但当模态与任何其他图片一起打开时，PREV-NEXT无法正常工作。。。显示的图像在某种程度上是随机的。。。有什么建议吗？
您可以使用为图像设置的数据属性
数据图像
并针对这些属性


let _body=document.querySelector（'body'），
GalleryMg=document.querySelectorAll（'.gallery img'），
modalWindow=document.getElementById（'modal-gall'），
modalImg=document.getElementById（'modal-slides'），
closeModal=document.getElementById（'closem'），
nextBtn=document.getElementById（'nextm'），
prevBtn=document.getElementById（'prevm'），
卡斯利德；
galleryImg.forEach（（img）=>{
img.addEventListener（'click'，function（）{
curSlide=Number（this.dataset.image）；
modalImg.src=this.src；
_body.classList.add（'modal-open'）；
});
});
nextBtn.addEventListener（'click'，function（）{
curSlide==galleryImg.length？curSlide=1:curSlide+=1
modalImg.src=document.querySelector（'.gallery img[data image=“”+（curSlide）+'”）.src；
});
prevBtn.addEventListener（'click'，函数（）{
curSlide==1？curSlide=galleryImg.长度：curSlide-=1
modalImg.src=document.querySelector（'.gallery img[data image=“”+（curSlide）+'”）.src；
});
closeModal.addEventListener（'click'，函数（e）{
e、 预防默认值（）；
_body.classList.remove（'modal-open'）；
});
正文{
字体系列：Tahoma，无衬线；
保证金：0；
背景色：#514c5c；
颜色：白色；
}
.胆容器{
文本对齐：左对齐；
填充：0.2%0.2%；
宽度：自动；
}
.gall文本{
文本对齐：左对齐；
字体大小：16px；
填料：50px 5px 2px 5px；
宽度：100%；
}
.画廊{
显示器：flex；
高度：自动；
柔性包装：包装；
对正内容：左；
调整内容：灵活启动；
填充：5px0 5px0；
}
.gallery>img{
最大宽度：90vw；
最大高度：200px；
光标：放大；
显示：块；
填充：6px；
}
#模态瘿{
显示：无；
位置：固定；
z指数：1；
左：0；
排名：0；
底部：0；
右：0；
填充：8px；
溢出：隐藏；
背景色：rgba（0,0,0,0.97）；
对齐项目：居中；
证明内容：中心；
}
.modal open#modal gall{
显示：块；
}
.模态内容{
位置：相对位置；
宽度：100%；
高度：自动；
文本对齐：居中；
}
#模态幻灯片{
显示：块；
最大宽度：100%；
最大高度：计算（100vh-16px）；
保证金：自动；
}
#克洛姆{
光标：指针；
颜色：#9e97b1；
位置：绝对位置；
顶部：26px；
右：0px；
字体大小：40px；
字体大小：粗体；
边界半径：5px 0 5px；
填充：2x16px 8px 16px；
z指数：2；
背景色：#29272e；
文字装饰：无；
}
#克洛斯姆：悬停，
#closem：焦点{
颜色：红色；
光标：指针；
}
#普雷维，
#nextm{
光标：指针；
位置：绝对位置；
最高：46%；
宽度：自动；
填充：10px 22px；
利润上限：-10px；
颜色：#9e97b1；
字体大小：粗体；
字体大小：30px；
用户选择：无；
-webkit用户选择：无；
背景色：#29272e；
文字装饰：无；
}
#普雷姆{
左：0；
边界半径：0 5px 5px 0；
}
#nextm{
右：0；
边界半径：5px 0 5px；
}
#悬停，
#nextm：悬停{
背景色：#322c42；
}

出口02

Lorem ipsum dolor sit amet，是一位杰出的献身者。努克·埃吉斯塔斯·莫里斯·朗卡斯、阿利奎姆·图皮斯、坦普斯·埃拉特。坐在阿梅特的猫身上。埃蒂亚姆·朗卡斯·托托·维韦拉（Etiam rhoncus tortor id nunc viverra），来自利奥·康格（leo congue）。Nam tristique elementum孕妇。在lorem pretium，在lobortis dui hendrerit，odio发挥了作用。在faucibus中，Interdum和malesuada在第一次同侧前就出名了。暂停欧盟erat设施，乌拉姆科佩尔mi id，森佩尔自由。伊库利斯悬钩子。弗林利亚酒后驾车。

>>CRA非康莫多马萨。

出口01

Lorem ipsum dolor sit amet，是一位杰出的献身者。努克·埃吉斯塔斯·莫里斯·朗卡斯、阿利奎姆·图皮斯、坦普斯·埃拉特。坐在阿梅特的猫身上。埃蒂亚姆·朗卡斯·托托·维韦拉（Etiam rhoncus tortor id nunc viverra），来自利奥·康格（leo congue）。Nam tristique elementum孕妇。在lorem pretium，在lobortis dui hendrerit，odio发挥了作用。在faucibus中，Interdum和malesuada在第一次同侧前就出名了。暂停欧盟erat设施，乌拉姆科佩尔mi id，森佩尔自由。伊库利斯悬钩子。弗林利亚酒后驾车。

>>CRA非康莫多马萨。

❮
❯
您的
toSlide
功能是做什么的？另外，在调用
showsiled
函数时，为什么要使用
display:none和
显示：
<div class="row">
 <div class="col">
  <img src="https://static.pexels.com/photos/385997/pexels-photo-385997.jpeg" onclick="openLightbox(this);toSlide(1)" class="hover-shadow preview">
 </div>
 <div class="col">
  <img src="https://static.pexels.com/photos/574521/pexels-photo-574521.jpeg" onclick="openLightbox(this);toSlide(2)" class="hover-shadow preview">
 </div>
 <div class="col">
  <img src="https://static.pexels.com/photos/386009/pexels-photo-386009.jpeg" onclick="openLightbox(this);toSlide(3)" class="hover-shadow preview">
 </div>
</div>

<div id="Lightbox" class="modal">
 <span class="close pointer" onclick="closeLightbox()">&times;</span>
    
 <div class="modal-content">
  <div class="slide">
   <img id="modal-slides" class="image-slide" alt="END OF SLIDESHOW GROUP" />
  </div>

  <a class="previous" onclick="changeSlide(-1)">&#10094;</a>
  <a class="next" onclick="changeSlide(1)">&#10095;</a>
   </div>
  </div>
 </div>
</div>

var slideIndex = 1;
showSlide(slideIndex);

function openLightbox(element) {
  document.getElementById('Lightbox').style.display = 'block';
  document.getElementById("modal-slides").src = element.src; 
}
function closeLightbox() {
  document.getElementById('Lightbox').style.display = 'none';
}
function changeSlide(n) {
    showSlide(slideIndex += n);
}
function toSlide(n) {
    showSlide(slideIndex = n);
}
function showSlide(n) {
  const slides = document.getElementsByClassName('slide');
  if (n > slides.length) {
    slideIndex = 1; 
  }
  if (n < 1) {
    slideIndex = slides.length;
  }
  for (let i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
  }
  slides[slideIndex - 1].style.display = 'block';
}