小编Val*_*ars的帖子

在glider.js上实现自动播放

所以我在我的网站上使用 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();
}
Run Code Online (Sandbox Code Playgroud)

但我不知道如何激活它,使其发挥作用。我知道我应该将参数传递给“滑块”和“毫秒”,但我不知道我到底应该传递什么,我应该为每张幻灯片设置一个特殊的类,然后传递该类吗?假设我的 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>
Run Code Online (Sandbox Code Playgroud)

如何让自动播放工作?谢谢!

html javascript slider autoplay carousel

4
推荐指数
2
解决办法
6468
查看次数

标签 统计

autoplay ×1

carousel ×1

html ×1

javascript ×1

slider ×1