Javascript 瞄准col类中的下一个图像 响应画廊

我试图建立一个带有箭头的图像库，这样你就可以按下下一个箭头并显示下一个图像（就像所有的基本滑块一样）。由于我刚刚学习了bootstrap的一些基础知识，所以我决定在这个项目中使用bootstrap，但是，我必须将每个图像放在一个单独的col类中（如果这不是一个好方法，请通知我）。由于在事件侦听器中使用

this.nextElementSibling

时，每个图像都嵌套在另一个col类中，因此我得到

null

作为返回。有什么方法可以让我瞄准下一个图像吗？

您可以使用jQuery进行此操作，因为您已经将其用于引导

<div class="container bg-custom-blue">
  <h2 class="text-center pt-5 pb-4">The Responsive Gallery</h2>
  <div class="row">
    <div class="col-12 col-md-6 col-xl-4 p-2">
      <img class="img-fluid" src="images/waiter.jpg" alt="Waiter serving food">
    </div>
    <div class="col-12 col-md-6 col-xl-4 p-2">
      <img class="img-fluid" src="images/romantic.jpg" alt="A couple enjoying a romantic dinner at our restaurant">
    </div>
    <div class="col-12 col-md-6 col-xl-4 p-2">
      <img class="img-fluid" src="images/nibbles.jpg" alt="Tasty nibbles to share">
    </div>


    <div class="col-12 col-md-6 col-xl-4 p-2">
      <img class="img-fluid" src="images/pasta-rucola-salad.jpg" alt="Fresh pasta with rucola">
    </div>
    <div class="col-12 col-md-6 col-xl-4 p-2">
      <img class="img-fluid" src="images/fish.jpg" alt="Fresh fillet of fish">
    </div>
    <div class="col-12 col-md-6 col-xl-4 p-2">
      <img class="img-fluid" src="images/fish.jpg" alt="One of our large selection of cakes we serve">
    </div>

    <div class="col-12 col-md-6 col-xl-4 p-2">
      <img class="img-fluid" src="images/chill.jpg" alt="Friends enjoying wine">
    </div>
    <div class="col-12 col-md-6 col-xl-4 p-2">
      <img class="img-fluid" src="images/beef.jpg" alt="Argentinian beef fillet">
    </div>
    <div class="col-12 col-md-6 col-xl-4 p-2">
      <img class="img-fluid" src="images/nibbles.jpg" alt="Waiter serving food">
    </div>

您可以使用Javascript，也可以遵循

$(this).parent().siblings().find("img")  

---

其中children[0]表示第一个子元素

您可以使用

document.querySelectorAll

并通过索引访问节点

小示例

const items=document.querySelectorAll（'.row.col-12'）；//行中的所有.col-12注释
设currentIndex=0；//当前项目索引
//刷新图标并设置边框颜色
常量刷新项=（）=>{
items.forEach（（项目，索引）=>{
item.style.border=`1px solid${index==currentIndex？'#f00'：'#0f0'}`；
});
}
//初始化
刷新项目（）；
//按索引的简单调用
//项目[5]。style.border='1px实心#0f0'；
//将单击事件添加到.prev按钮并增加当前索引1
document.querySelector（'.next'）.addEventListener（'click'，（）=>{
currentIndex+=1；
刷新项目（）；
});
//将事件添加到.prev按钮并将当前索引减少1
document.querySelector（'.prev'）.addEventListener（'click'，（）=>{
currentIndex-=1；
刷新项目（）；
})

下一步
上
响应画廊

无需从头开始创建，bootstrap支持这一点：谢谢@AdamH，但这并不是我所需要的。我正试图建立一个画廊，当你点击图像时，它会以更大的尺寸显示，用户也可以导航到下一个和上一个图像。我知道有插件可以做到这一点，但我的目的是练习。谢谢，有没有办法用vanilla js做到这一点？

this.parentElement.nextElementSibling.children[0];