获取活动幻灯片并突出显示计数器中的相应数字

Question

我正在为我的新网站使用 Fullpage.js。您可以在下面看到一个工作示例。我的目标是控制下面 Javascript 代码生成的 #num。

我想突出显示与显示的幻灯片对应的每个数字。

所以：
幻灯片编号 1：01 02 03 04 05
幻灯片编号 2：01 02 03 04 05
. . .

如有任何帮助，我们将不胜感激。

$(document.body).ready(function(){$('#fullpage').fullpage({
afterLoad:function(index, nextIndex, direction){
    var str = "";
    var n = $( ".fp-section.active .fp-slide" ).length + 1;
    for (var x = 1; x < n ; x++) {
    str = str + 0 + x + "\u00A0\u00A0";
    }
    $("#num").text(str);
  }
});});

body{
  font-family:arial;
  background:black;
  color:white;
  text-align:center;
}
#num{
  position:fixed;
  width:100%;
  right:0;
  bottom:12px;
  z-index:10006; 
  font-size:21px;
}
.slide{
  line-height:100vh;
  text-align:center;
  font-size:100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://alvarotrigo.com/fullPage/jquery.fullPage.css" rel="stylesheet"/>
<script src="http://alvarotrigo.com/fullPage/jquery.fullPage.min.js"></script>

<div id="fullpage">

<div class=section id=section1>
<div class=slide>01</div>
<div class=slide>02</div>
<div class=slide>03</div>
<div class=slide>04</div>
</div>

<div class=section id=section2>
<div class=slide>01</div>
<div class=slide>02</div>
<div class=slide>03</div>
</div>
  
</div>
<div id="num"></div>

Answer 1

$(document).ready(function(){
  $('#fullpage').fullpage({
    afterLoad: function(index, nextIndex, direction){
      $("#num").html("");
      var slide = nextIndex;
      var str = "";
      var n = $( ".fp-section.active .fp-slide" ).length + 1;
      for (var x = 1; x < n ; x++) {
        str = "<span class='slide-num slide-num-"+ x +"'>"+ 0 + x + "</span>";
        $("#num").append(str);
      }
      updateNavigation(slide);
    },
    onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){
      var slide = nextSlideIndex+1;
      updateNavigation(slide);
    }
  });
    
  function updateNavigation(slide) {
    $('.slide-num').removeClass('active');
    $('.slide-num-'+ slide).addClass('active');
  }
});

body{
  font-family:arial;
  background:black;
  color:white;
  text-align:center;
}
#num{
  position:fixed;
  width:100%;
  right:0;
  bottom:12px;
  z-index:10006; 
  font-size:21px;
}
.slide{
  line-height:100vh;
  text-align:center;
  font-size:100px;
}
.slide-num {
  display: inline-block;
  margin: 0 5px;
}
.slide-num.active {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://alvarotrigo.com/fullPage/jquery.fullPage.css" rel="stylesheet"/>
<script src="http://alvarotrigo.com/fullPage/jquery.fullPage.min.js"></script>

<div id="fullpage">

<div class=section id=section1>
<div class=slide>01</div>
<div class=slide>02</div>
<div class=slide>03</div>
<div class=slide>04</div>
</div>

<div class=section id=section2>
<div class=slide>01</div>
<div class=slide>02</div>
<div class=slide>03</div>
</div>
  
</div>
<div id="num"></div>

Answer 2

我现在在这里，使用 resetSlider 插件一切正常。我只想顺利交易 #num。

$(function (){$('#fullpage').fullpage({
onLeave: function(index, nextIndex, direction){
    $('.slide-num').addClass("via");  
},
afterLoad:function(index, nextIndex, direction){
    var str = "";
    var n = $( ".fp-section.active .fp-slide" ).length + 1;
    for (var x = 1; x < n ; x++) {
      str = "<li class='slide-num slide-num-"+ x +"'>"+ 0 + x + "</li>";
      $("#num").append(str);
    }
    $('.slide-num-1').addClass('attivo');
    },
onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){
    var slide = nextSlideIndex+1;
    $('.slide-num').removeClass('attivo');
    $('.slide-num-'+ slide).addClass('attivo');
}
});});

body{
  font-family:arial;
  background:black;
  color:white;
  text-align:center;
}
#num{
  position:fixed;
  width:100%;
  right:0;
  bottom:12px;
  z-index:10006; 
  font-size:21px;
}
.slide{
  line-height:100vh;
  text-align:center;
  font-size:100px;
}
.slide-num {
  display: inline-block;
  margin: 0 5px;
  opacity:.2;
}
.attivo {
  opacity: 1;
}
.via{
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://alvarotrigo.com/fullPage/jquery.fullPage.css" rel="stylesheet"/>
<script src="http://alvarotrigo.com/fullPage/jquery.fullPage.min.js"></script>

<div id="fullpage">

<div class=section id=section1>
<div class=slide>01</div>
<div class=slide>02</div>
<div class=slide>03</div>
<div class=slide>04</div>
<div class=slide>05</div>
<div class=slide>06</div>
<div class=slide>07</div>
<div class=slide>08</div>
</div>

<div class=section id=section2>
<div class=slide>01</div>
<div class=slide>02</div>
</div>

<div class=section id=section3>
<div class=slide>01</div>
<div class=slide>02</div>
<div class=slide>03</div>
<div class=slide>04</div>
<div class=slide>05</div>
<div class=slide>06</div>
</div>
  
</div>
<div id="num"></div>

获取活动幻灯片并突出显示计数器中的相应数字

Get active slide and highlight the corresponding number in the counter

javascript

css

jquery

fullpage.js