How do I hide an element when a certain slide has a class of active in fullpage.js slider?

Question

I am using fullpage.js and have a fixed element on the page that needs to change according to what slide is active. So basically if slide 1 is active, then fixed element 1 is showing. If slide 2 is active, then fixed element 2 is showing instead and so on. Nothing is working for me and I can't figure out why.

$('.fp-slidesNav a').click(function() {
        var activeSlide = $('.slide.active');
        if ((activeSlide).hasClass('slide1')) {
            $('fixedelement1').show();
            $('fixedelement1').siblings().hide();
        }
        else if ((activeSlide).hasClass('slide2')) {
            $('fixedelement2').show();
            $('fixedelement2').siblings().hide();
        }
       else if {
         ...
       }
});

It's possible that I have a class name wrong or there is a typo somewhere in all my code, but I don't think so because I checked everything multiple times. It's weird because I can do

 $('a').click(function() {
       alert('hello');
});

and when I click on the .fp-slidesNav a anchor and get no alert but click on another random link and I get the alert.

Answer 1

Use afterSlideLoad (anchorLink, index, slideAnchor, slideIndex)

Callback fired once the slide of a section have been loaded, after the scrolling has ended. Parameters:

anchorLink: anchorLink corresponding to the section.

index: index of the section. Starting from 1.

slideAnchor: anchor corresponding to the slide (in case there is)

slideIndex: index of the slide. Starting from 1. (the default slide doesn't count as slide, but as a section)

In case of not having anchorLinks defined for the slide or slides the slideIndex parameter would be the only one to use. Example:

$('#fullpage').fullpage({
    anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],

    afterSlideLoad: function( anchorLink, index, slideAnchor, slideIndex){
        var loadedSlide = $(this);

        //first slide of the second section
        if(anchorLink == 'secondPage' && slideIndex == 1){
            alert("First slide loaded");
        }

        //second slide of the second section (supposing #secondSlide is the
        //anchor for the second slide
        if(index == 2 && slideIndex == 'secondSlide'){
            alert("Second slide loaded");
        }
    }
});

Answer 2

I think @KishoreSahas is right. but few changes / improvisations

assuming ur fixedelement on the page looks similar to the below. may be section tag with child div tags

<ul id="fixedelement">
  <li class="slide firstPage active"></li>
  <li class="slide secondPage "></li>
  <li class="slide thirdPage "></li>
  <li class="slide fourthPage "></li>

</ul>

your slider code needs to look like below

$('#myslider').fullpage({
  anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage']
  afterSlideLoad: function(anchorLink, index){
    $('#fixedelement .slide').each(function () {$(this).hide();}
    $('#fixedelement .' + anchorLink).each(function () {$(this).show();}
  }
});

I have never used the fullpage.js before so the above code is not tested.