pacificfrost pacificfrost - 2 months ago 27
jQuery Question

Hiding Section/Slide Arrows on Pages - Fullpage.js

I'm working on a website using fullpage.js:
https://github.com/alvarotrigo/fullPage.js/

The first problem I had is that I need to hide the arrows once it falls into the last section and/or slide. ie. if you're on the far right slide, my hope is it will hide the right arrow. Top section, top arrow is hidden, etc.

I've tried quite a bit to make it work, I'm still learning javascript so forgive me if I'm way off, but I was hoping this was close:

function hideArrowUp() {
if(index == 1){
$('.arrowUp').hide();
}
else {
$('.arrowUp').show();
}
}

function hideArrowDown(anchorlink) {
if(index == 3){
$('.arrowDown').hide();
}
else {
$('.arrowDown').show();
}
}


And I was hope to prevent horizontal slides from repeating/rolling-over, not sure if that's an easy one.

Please and thanks!

Answer

Just use the plugin callbacks such as afterLoad or onLeave to remove the arrow by using javascript or by adding a class.

You can also use the class of type fp-viewing-xxxx added to your body element to apply one or another style.

Take a look at the demo page of fullpage.js. In that case you can inspect the DOM and see how the body gets the class fp-viewing-4thpage applied when reaching the last section. That's because it is using the anchor 4thpage as you can see in the URL (#4thpage).

Therefore you can do something like the following in your CSS stylesheet:

.fp-viewing-4thpage .myArrow{
    display:none;
}

Remember the demo page and many others examples are available in the downloaded files.

Comments