Question

我使用fullpage.js来创建mulplte水平滑块。基本上，您可以将veirtaclly滚动到每个滑块，然后在每个部分内水平滑动。我想要做的是显示每个部分的当前幻灯片/总幻灯片。我遇到的问题是，因为它们都有相同的类，所以整个页面的总数与每个部分的总数相对，而且当前的幻灯片也不会改变，因为它获得了＆＃34;活跃的＆＃34;从所有幻灯片中分类。

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

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

$('.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); }); }

但是请注意，你可能想要移动几个部分远离这个功能（总项目数量，因为它没有改变和其他东西），简单地说 - 这个功能更多的概念，它需要一些重构才能为生产做好准备））抱歉

Answer 2

这里是你的小提琴，以及正常运作的jquery

我对我的回答做了一个非常大的编辑，包括在活动中运行的功能，为此目的，我只是使用＆＃39;点击＆＃39;在一个部分，显然你想要为你的活动改变这个。我还添加了当前幻灯片索引的警报，以便您可以看到它正在运行。

要使用，只需使用要更新计数器的部分的索引（以0开头）调用slideCounts（）函数。每个循环都会在文档就绪时添加计数器。

小提琴：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>

使用多个滑块获取当前和总幻灯片

2 个答案: