如何为这些轮播按钮添加事件监听器？

Question

我严格按照 Youtube 教程进行操作，但似乎我无法使旋转木马正常工作，但我真的不知道为什么。我一直在尝试像其他类一样用不同的标识符来解决它，但它似乎不起作用。

carrousel 按钮没有注册事件侦听器，尽管我在脚本中特别提到了它们，但我不知道我错过了什么。

我跟着一个教程想出了一个相当不错的旋转木马，一切都很顺利......

在本教程中，开发人员希望通过

[data-carrousel-button]

属性选择按钮。我一直在使用以下脚本，但我的代码似乎根本没有选择按钮：

const buttons = document.querySelectorAll("[data-carrousel-button]")

buttons.forEach(button => {

  button.addEventListener("click", () => {
    const offset = button.dataset.carrouselButton === "next" ? 1 : -1
    const slides = button
      .closest("[data-carrousel]")
      .querySelector("[data-slides]")

    const activeSlide = slides.querySelector("[data-active]")
    let newIndex = [...slides.children].indexOf(activeSlide) + offset
    if (newIndex < 0) newIndex = slides.children.length - 1
    if (newIndex >= slides.children.length) newIndex = 0

    slides.children[newIndex].dataset.active = true
    delete activeSlide.dataset.active
  })
})

<div id="carrousel" data-carrousel>
  <button class="buttons" id="carrousel-button-r" data-carrousel-button="back">&#8656;</button>
  <button class="buttons" id="carrousel-button-f" data-carrousel-button="next">&#8658;</button>
  <ul data-slides>
    <li class="slide" data-active><img src="/img/pic1.jpg"></li>
    <li class="slide"><img src="/img/pic2.jpg"></li>
    <li class="slide"><img src="/img/pic3.jpg"></li>
  </ul>
</div>

我确实检查了是否为每个按钮添加了事件侦听器，但没有。另外，顺便说一句，我正在使用 EJS 视图引擎，以防它有一定的重要性。感谢您的帮助！