I'm working on a website using fullpage.js: .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!

I'm working on a website using fullpage.js: https://github./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!

• javascript
• jquery
• fullpage.js

• You got it answered in the github issues forum: github./alvarotrigo/fullPage.js/issues/1339 – Alvaro Commented Jun 29, 2015 at 9:25

2 Answers 2

Now You can to this with javascript options.

When u call the full page function on a div. Just set the option control arrow to false.

//call full page function with options.
$('#fullpage').fullpage({
        anchors:['anchor-1','anchor-2'],
        controlArrows: false,
        });

Regards Alex

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.