使用多张幻灯片获取当前和总幻灯片

Question

我正在使用 fullpage.js 来拥有多个水平滑块。基本上，您可以垂直滚动到每个滑块，然后在每个部分中水平滑动。我想要做的是显示每个部分的当前幻灯片/总幻灯片。我遇到的问题是，因为它们都有相同的类，所以它得到的是整个页面的总数，而不是每个部分的总数，而且当前幻灯片不会改变，因为它从所有幻灯片中获取了“活动”类。

HTML

<div class="section" id="section1" >

            <div class="slide" id="golf1"></div>
            <div class="slide" id="slide2"></div>
            <div class="slide" id="slide3"></div>
            <div class="slide" id="slide4"></div>

            <div class="slideContent">
                <div class="num"></div>
            </div>
        </div>

        <div class="section" id="section2">

            <div class="slide" id="skills1"></div>
            <div class="slide" id="slide2"></div>
            <div class="slide" id="slide3"></div>
            <div class="slide" id="slide4"></div>

            <div class="slideContent">

                <div class="num"></div>

            </div>

        </div>

JS

  var totalItems = $('.slide').length;
            var currentIndex = $('.slide.active').index() + 1;
            $('.num').html(''+currentIndex+'/'+totalItems+'');

Answer 1

这是给你的小提琴，以及正常运行的 jquery

我对我的答案进行了相当大的修改，以包括在事件上运行的功能，为此我只是在一个部分上使用了“点击”，显然你会想为你的事件更改它。我还添加了当前幻灯片索引的警报，以便您可以看到它正在工作。

要使用，只需使用要更新计数器的部分的索引（从 0 开始）调用 slideCounts() 函数。 each 循环在文档就绪时添加计数器。

小提琴：http://jsfiddle.net/168xofn3/4/

jQuery - 你想遍历所有部分，计算部分中的幻灯片，然后获取活动幻灯片。然后输出每个部分的活动幻灯片/总幻灯片。

$('.section').each(function(i){
    slideCounts(i);
});

$('.section').on('click',function(){
    var i = $(this).index();
    slideCounts(i);
});


function slideCounts(i){
    var elm = $('.section').eq(i);
    var total = elm.find('.slide').length;
    var current = elm.find('.active').index();
    current++;
    elm.find('.num').html(''+current+'/'+total+'');
    alert(current);  //remove this alert

}

我还稍微更改了您的标记以使示例正常工作

<div class="section" id="section1" >
    <div class="slide"></div>
    <div class="slide active"></div>
    <div class="slide"></div>
    <div class="slide"></div>

    <div class="slideContent">
        <div class="num"></div>
    </div>
</div>
<div class="section" id="section2" >
    <div class="slide"></div>
    <div class="slide"></div>
    <div class="slide"></div>
    <div class="slide active"></div>

    <div class="slideContent">
        <div class="num"></div>
    </div>
</div>
<div class="section" id="section3" >
    <div class="slide active"></div>
    <div class="slide"></div>
    <div class="slide"></div>
    <div class="slide"></div>

    <div class="slideContent">
        <div class="num"></div>
    </div>
</div>

Answer 2

您需要为每个部分运行此函数，而不是为整个页面。
有点像：

$('.section').each(function(){
    var section = $(this),
        sectionSlides = section.find('.slide'),
        totalItems = sectionSlides.length,
        currentIndex = sectionSlides.filter('.active').index() + 1,
        numContainer = section.find('.num'); //assuming you have numContainers in every section

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

编辑： 如果您想多次运行此功能（以在幻灯片更改的每个部分中更新当前活动索引）。每次幻灯片更改时运行此函数。代码可能如下所示：

var sections = $('.section');

updateCurrentIndex(); //on document.ready and on each slidechange

function updateCurrentIndex(){
    sections.each(function(){
        var section = $(this),
            sectionSlides = section.find('.slide'),
            totalItems = sectionSlides.length,
            currentIndex = sectionSlides.filter('.active').index() + 1,
            numContainer = section.find('.num'); //assuming you have numContainers in every section

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

但是请注意，您可能希望从这个函数中移出几个部分（比如总项目数，因为它没有改变和其他事情），简单地说 - 这个函数更像是一个概念，它需要进行一些重构才能为生产做好准备））抱歉