For my upcoming website, I have decided to incorporate Fullpage.js. Take a look at the live example below.
My objective is to be able to manage the #num that gets generated by the Javascript code provided here.
The idea is to emphasize every number that corresponds to the currently displayed slide.
Hence:
Slide number 1: 01 02 03 04 05
Slide number 2: 01 02 03 04 05
. . .
I would appreciate any assistance with this matter.
$(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>