Fullpage.js: Remove left arrow at first slide?

Created on 4 Jun 2014 · 5Comments · Source: alvarotrigo/fullPage.js

Hi,

Thanks for this great demo! It's awesome!

My title says it all: can I remove the left arrow at the first slides of each section? I don't want people to immediately go to the last slide, but to follow slide1, slide2, slide3, and then slide 4. Not slide 1 and then backwards to slide 4.

I've been trying several things but I'm unsuccessful. Hope you can help me out!

Regards,
Simone

Source

Sperziemone

Most helpful comment

What about using the option loopHorizontal: false ? :)

$(document).ready(function() {
    $('#fullpage').fullpage({
        loopHorizontal: false
    });
});

alvarotrigo on 4 Jun 2014

👍2

All 5 comments

What about using the option loopHorizontal: false ? :)

$(document).ready(function() {
    $('#fullpage').fullpage({
        loopHorizontal: false
    });
});

alvarotrigo on 4 Jun 2014

👍2

Oh my, I'm so stupid. Sorry I couldn't figure this out on my own.
Thanks for the quick reply!

Sperziemone on 4 Jun 2014

No problem! :)

alvarotrigo on 4 Jun 2014

@Sperziemone
If you'd like to allow looping from the last slide to the first but prevent looping from the first to the last slide,
you can also
1) set the loopHorizontal option to true,
2) set the default CSS for the left arrow to display none:

div.fp-controlArrow.fp-prev { 
    display: none; 
}

3) add an afterSlideLoad callback to show and hide the arrow as appropriate:

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

    //after loading the 0th (first) slide
    if (slideIndex == 0){
        $('div.fp-controlArrow.fp-prev').hide()
    } else {
        $('div.fp-controlArrow.fp-prev').show()
    }
 }