fullPage.js Start at Slide 2

Question

I'm using fullPage.js for a single page website. One of my sections uses the horizontal slides for displaying slides horizontally. I'm trying to figure out how to have it start at the second slide in my three slide series. Reading the documentation, I understand how to set up an anchor and directly click to that slide but I am wanting to have it start at slide 2 when you reach the series via scrolling vertically.

I thought maybe setting the second slide with the class='active' would do the trick but it doesn't....in fact that breaks the horizontal slides. Here is what I have html and js wise...wondering if one of the callback functions would work but not quite clear on how to use them.

<div class="section" id="section5">
  <div class="slide"><div class="wrap"><h1>Hello fullPage.js</h1></div></div>
  <div class="slide"><h1>This is an awesome plugin</h1></div>
  <div class="slide"><h1>Which enables you to create awesome websites</h1></div>
</div>

This is what I am using to initialize the function....

$(document).ready(function() {
        $.fn.fullpage({
            anchors: ['home', 'welcome', 'about', 'services', 'faqs', 'contact'],
            menu: '#menu'
        });

    });

Answer 1

One way to do it, would be to scroll to that slide on page load (which would still be invisible for the user if that section is not the landing one). For that, you could use afterRender callback and then, you could modify the function scrollSlider of the plugin to make it public and accessible from outside as detailed here.

Then you could so something like:

afterRender: function () {
    //getting the 2nd section by the index
    var section = $('.section').eq(1);

   //moving to starting slide of the 2nd section to the 2nd slide, for example
   $.fn.fullpage.scrollSlider(2, 1);
}

I would recommend you anyway to add it as a recommendation to implement in the github issues forum of the plugin.