在 fullpage.js 上获取当前幻灯片答案

【问题标题】：Get current slide on fullpage.js在 fullpage.js 上获取当前幻灯片
【发布时间】：2016-10-11 19:35:17
【问题描述】：

我是一个快乐的 Fullpage.js 用户！
我只是想添加一个显示当前幻灯片数/幻灯片总数的类 (.num)。

我正在使用这个工作正常的功能，问题是它不会在幻灯片更改时更新。

$('.section').each(function(){
    var section = $(this),
    sectionSlides = section.find('.slide'),
    totalItems = sectionSlides.length,
    currentIndex = sectionSlides.filter('.active').index() + 2,
    numContainer = section.find('.num');

numContainer.html(currentIndex + ' / ' + totalItems);
});

http://jsfiddle.net/168xofn3/11/

【问题讨论】：

如何检查当前幻灯片是否已更改？
嗯我不知道，我以为那个 .active 状态就足够了。
我认为您需要识别活动幻灯片更改时触发的事件。是当您单击某个按钮时，例如下一步还是返回？之后，您需要将一些代码放入该事件处理程序中，当新的活动幻灯片很明显时。
我可以单击右/左箭头转到下一张/上一张幻灯片，但我也可以只使用键盘的箭头。我可以请您提示如何触发该事件吗？
当然可以，但是您能否发布包含这些按钮功能的 html 和 javascript。

标签： javascript jquery fullpage.js

【解决方案1】：

三种方式：

使用回调，例如onSlideLeave。
使用state classes added by fullPage.js 之一
只是做类似$('.fp-section.active').find('.fp-slide.active');的事情

【讨论】：

感谢提示 onSlideLeave 的问题是我无法设置某人离开的方向。它可以是左或右，因此在 currentIndex 中是 +1 或 -1。
检查回调中的参数direction。

【解决方案2】：

我相信这段代码可以解决我的问题，也许我只需要更改那个警报？

$('#fullpage').fullpage({
    onSlideLeave: function( anchorLink, index, slideIndex, direction, nextSlideIndex){
        var leavingSlide = $(this);

        //leaving the first slide of the 2nd Section to the right
        if(index == 2 && slideIndex == 0 && direction == 'right'){
            alert("Leaving the fist slide!!");
        }

        //leaving the 3rd slide of the 2nd Section to the left
        if(index == 2 && slideIndex == 2 && direction == 'left'){
            alert("Going to slide 2! ");
        }
    }
});

【讨论】：