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

Packy 发表于 Dev

派克

我正在使用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>

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

qui

这是为您准备的小提琴，还有正在运行的jquery

我对答案进行了相当大的编辑，以包含在事件上运行的功能，为此，我仅在部分上使用了“单击”，显然，您希望针对事件进行更改。我还添加了有关当前幻灯片索引的警报，因此您可以看到它正在工作。

若要使用，只需使用要为其更新计数器的部分的索引（从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>