javascript - 如何在离开时将 slider 重置为幻灯片 1？

Question

我正在使用最新版本 (2.1.8) 的 fullPage.js 创建一个仪表板，它通过更新 window.location 自动垂直和水平滑动。

参见 jsfiddle .

我面临的问题是，当我们回到第 2 部分时， slider 仍处于最终幻灯片位置，必须先滑回幻灯片 1，然后才能继续播放幻灯片。

我已尝试按照 Issue #129 的说明进行操作，看起来对使用 1.7.2 版的人有用:

• 公开 scrollSlider 函数
• 更改函数调用的名称

• 应用 onLeave 事件代码:

  onLeave: function(index, nextIndex, direction){
      //getting the section by the index
      var section = $('.section').eq((index - 1));
  
      //if the section we are leaving has slides...
      if (section.find('.slides').length) {
  
          //moving to slide 0
          $.fn.fullpage.scrollSlider(section, 0);
      }
  }
  

但是，这对行为没有影响。

有没有人能建议一种方法，以确保在使用最新版本的 fullPage.js 移动到下一部分时， slider 始终放回默认幻灯片？

祝一切顺利

AshBestos

Answer 1

我遇到了同样的问题。使用函数 scrollSlider() 的副本解决。

将其命名为 function scrollDefault() 并将此函数设置为 public。

在我的 jquery.fullPage.custom.js 中

$.fn.fullpage.scrollDefault = function(section, slide){
  if(typeof slide != 'undefined'){
    var slides = section.find('.slides');
    var destiny =  slides.find('[data-anchor="'+slide+'"]');

    if(!destiny.length){
      destiny = slides.find('.slide').eq(slide);
    }

    if(destiny.length){
      landscapeScroll(slides, destiny);
    }
  }
};

setTimeout 是一种隐藏滚动动画的快速但肮脏的解决方案。因此，当您单击另一个部分并返回时，您会看到第一张幻灯片。

在我的 $(document).ready(function() {

onLeave: function(index, nextIndex, direction){
  setTimeout(function(){
    var section = $('.section').eq((index - 1));
    if (section.find('.slides').length) {
      $.fn.fullpage.scrollDefault(section, 0);
    }
  }, 500);
}