在 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" 和 "miliseconds"，但我不知道我到底应该传递什么，我是否应该为每张幻灯片设置一个特殊的 class，然后将那个 class?假设我的 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

Answer 2

我已将已接受的答案调整为鼠标悬停时暂停自动播放。此外，您可以使用 slideAutoPaly 函数的 repeat 参数处理自动播放循环。

var slider = new Glider(document.querySelector('.glider'), {
    slidesToScroll: 1,
    slidesToShow: 1,
    dots: '#dots',
    arrows: {
        prev: '.glider-prev',
        next: '.glider-next'
    }
});

slideAutoPaly(slider, '.glider');

function slideAutoPaly(glider, selector, delay = 5000, repeat = true) {
    let autoplay = null;
    const slidesCount = glider.track.childElementCount;
    let nextIndex = 1;
    let pause = true;

    function slide() {
        autoplay = setInterval(() => {
            if (nextIndex >= slidesCount) {
                if (!repeat) {
                    clearInterval(autoplay);
                } else {
                    nextIndex = 0;
                }
            }
            glider.scrollItem(nextIndex++);
        }, delay);
    }

    slide();

    var element = document.querySelector(selector);
    element.addEventListener('mouseover', (event) => {
        if (pause) {
            clearInterval(autoplay);
            pause = false;
        }
    }, 300);

    element.addEventListener('mouseout', (event) => {
        if (!pause) {
            slide();
            pause = true;
        }
    }, 300);
}

此外，检查 Github 问题：https://github.com/NickPiscitelli/Glider.js/issues/43

在 glider.js 上实现自动播放

Implementing Autoplay on glider.js

html

javascript

slider

autoplay

carousel