javascript - 同一页面中的多个滑翔机与 wordpress 中的 glider.js

Question

我试图解决几天但仍然失败。这就是为什么我来寻求你们中的任何人是否可以提供帮助。我在这个测试页面上使用glider.js并且非常成功。

现在的问题是我尝试在同一页面上使用 3 个滑翔机，第 2 和第 3 滑翔机无法正常工作。尝试谷歌它已经得出了 2 种可能的解决方案，即在 HTMLcollection 上运行循环或使用forEach 方法。

尽管如此，我的自学知识限制了我执行两种可能的解决方案。因此，你们中的任何人都可以让我知道我应该将哪些代码挂接到 wp_footer 以使多个滑翔机在同一页面中工作吗？

目前这是我用来启动滑翔机的 wp_footer 中的代码

<script>
window.addEventListener('load', function(){

new Glider(document.querySelector('.glider'), {
  slidesToShow: 1.2,
    slidesToScroll: 1,
  dots: '#dots',
  arrows: {
    prev: '.glider-prev',
    next: '.glider-next'
  },
    responsive: [
    {
      // screens greater than >= 775px
      breakpoint: 775,
      settings: {
        slidesToShow: 1.9,
        slidesToScroll: 1,
      }
    },{
      // screens greater than >= 1024px
      breakpoint: 1024,
      settings: {
      }
    }
  ]
});
});
</script>

标签： javascriptwordpress