Federico Ferrari Federico Ferrari - 1 month ago 8
CSS Question

Get active slide and highlight the corresponding number in the counter

I'm using Fullpage.js for my new website. Below you can see a working example.
My goal is to have control over that #num generated by the Javascript code below here.


I want to highlight every number corresponding to the slide shown.

So:

Slide number 1: 01 02 03 04 05

Slide number 2: 01 02 03 04 05

. . .

Any help would be greatly appreciated.



$(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

$(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>