在glider.js上实现自动播放

Question

因此，我正在网站上使用glider.js（https://nickpiscitelli.github.io/Glider.js/）处理幻灯片，因为我真的想将其最小化（我知道那里还有其他滑块，但是glider.js是最轻的）。但是，我确实需要自动播放功能，但是我似乎无法使它正常工作（我不太了解JS的使用方式，我只是复制了我需要的代码片段）

我找到了一些自动播放的代码，看起来像这样：

function sliderAuto(slider, miliseconds) {
 slider.isLastSlide = function() {
   return slider.page >= slider.dots.childElementCount - 1;
 }

 var slide = function() {
   slider.slideTimeout = setTimeout(function() {
     function slideTo() {
       return slider.isLastSlide() ? 0 : slider.page + 1;
     }

     slider.scrollItem(slideTo(), true);
   }, miliseconds);
 }

 slider.ele.addEventListener('glider-animated', function(event) {
   window.clearInterval(slider.slideTimeout);
   slide();
 });

 slide();
}

但是我不知道如何激活它才能使其正常工作。我知道我应该将参数传递给“ slider”和“ milliseconds”，但是我不知道到底应该传递什么，我应该为每个幻灯片设置一个特殊的类，然后传递该类吗？假设我的html是以下内容：

<div class="glider-contain">
  <div class="glider">
    <div>your content here</div>
    <div>your content here</div>
    <div>your content here</div>
    <div>your content here</div>
  </div>

我如何使自动播放起作用？谢谢！

Answer 1

根据您链接的文档和代码段，我会说首先，slider参数应该是您的滑翔机对象（使用new Glidder(...创建的对象，milliseconds是每张幻灯片可见的时间（以毫秒为单位）。

现在，它看起来像一个例子：

<div class="glider-contain">
  <div id="glider" class="glider">
    <div class="placeholder">1</div>
    <div class="placeholder">2</div>
    <div class="placeholder">3</div>
    <div class="placeholder">4</div>
  </div>
</div>

const glider = new Glider(document.getElementById('glider'));

function sliderAuto(slider, miliseconds) {
 const slidesCount = slider.track.childElementCount;
 let slideTimeout = null;
 let nextIndex = 1;

 function slide () {
   slideTimeout = setTimeout(
     function () {
       if (nextIndex >= slidesCount ) {
         nextIndex = 0;
       }
       slider.scrollItem(nextIndex++);
     },
     miliseconds
   );
 }

 slider.ele.addEventListener('glider-animated', function() {
   window.clearInterval(slideTimeout);
   slide();
 });

 slide();
}

sliderAuto(glider, 1000)

我已对代码段进行了一些编辑，因为您似乎不使用点。working fiddle