pacificfrost pacificfrost - 10 months ago 111
jQuery Question

Hiding Section/Slide Arrows on Pages - Fullpage.js

I'm working on a website using 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){
else {

function hideArrowDown(anchorlink) {
if(index == 3){
else {

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

Please and thanks!


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{

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