fullPage.js v4 is almost fully compatible with fullPage.js v3.

There are only a few changes that might affect you depending on your configuration:

Breaking changes

These are the main breaking changes:

1. The option licenseKey is not compatible

fullPage version 3 and fullPage.js version 4 use a different kind of license.

In order to use fullPage.js version 4, you'll need to acquire a new one by buying it from the fullPage pricing page.

You can still use version 3 instead if you prefer not to update it.

2. The option verticalCentered is no longer creating a wrapper

It uses flexbox to align the content vertically instead of display: table-cell.

fullPage.js v3

.fp-section.fp-table, .fp-slide.fp-table {
    display: table;
    table-layout:fixed;
    width: 100%;
}
.fp-tableCell {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    height: 100%;
}
<div class="section fp-table" style=""height: 503px;">
   <div class="fp-tableCell" style="height: 503px;"> <!-- dynamically created wrapper -->
      Vertically centerd
   </div>
</div>

fullPage.js v4

.fp-table{
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
}
<div class="section fp-table">
   Vertically centerd
</div>

3. Extensions for v3 won't be compatible with v4

The way the license is validated has changed and most extensions have suffered from changes to adapt them to the new version 4.

Nevertheless, there will be a 50% discount for previous customers and those who purchased extensions in the past 3 months will be able to update for free. (We are still working on this, so the update won't be available right away)

4. Sections & Slides are no longer using height

fullPage.js v3 sections/slides using an inline attribute with the height of the viewport. (height="850px"). fullPage.js v4 sections/slides will now be using the automatically calculated value of 100vh or 100% (if scrollOverflow is necessary).

5. The option v2compatible has been removed.

This option was providing full compatible support for callbacks using the signature/params of fullpage.js version 2.

6. The option scrollOverflowOptions has been removed

Because fullPage.js won't use the external vendor anymore, this option was also removed.

7. Support for IE 9 has been dropped

No comments :) Feel free to use fullPage.js v3 if you need support for legacy web browsers.

fullPage.js supports now all modern browsers and IE 11 (yes, we still want to provide the best experience for everybody)

New features in fullPage.js v4

1. Customizable navigating arrows

Left and right arrows for slides are now customizable. You can pass the HTML code on an array of 2 values on the option controlArrowsHTML. First position for the left, 2nd for the right arrow.

controlArrowsHTML: ['<div class="fp-arrow"></div>', '<div class="fp-arrow"></div>']

2. New option observer.

When true, fullPage.js will automatically detect changes on the DOM and re-initialize itself to adapt to the new DOM. Adding new sections/slides dynamically or scrollable content inside them is now super easy.

3. Hiding sections is now supported

fullPage.js will detect sections getting hidden when resizing the viewport and completely ignore them when hidden.

4. Normal page after fullPage.js

You will be able to scroll beyond the fullPage.js container and have a normal page underneath it.

5. Added a trigger param in all callbacks

afterLoad: function(origin, destination, direction, trigger){
    console.warn("afterLoad. Trigger: " + trigger );
},

Now you can know what action is triggering the scroll. The trigger value can be:

  • slideArrow
  • verticalNav
  • horizontalNav
  • keydown
  • wheel
  • menu

6. ScrollOverflow option won't require an external file

fullPage.js v3 required the scrolloverflow.min.js file on top of fullpage.js to use this feature.

fullPage.js v4 won't require this external file anymore. Saving the additional 37Kb and creating a better user experience by using the default scrolling bar.

Now you'll be able to add/remove content dynamically and the scrollbar will be automatically created or removed for you. Nothing to do from your side.

On top of that, you'll be able to fully control the scroll of the scrollable section and even track its position. More on that now.

7. Added new callback onScrollOverflow

This allows you to get the position of the scroll when scrolling inside a section/slide (when using scrollOverflow: true).

onScrollOverflow: function(section, slide, position){
    console.log(position);
},

8. Added new callback beforeLeave

It allows you to capture the event before giving it permission to move to the next section. Returning false on this callback will cancel the movement.

let cont = 0;

new fullPage('#fullpage',
    // example preventing scroll until we scroll 4 times
    beforeLeave: function(origin, destination, direction, trigger){
        cont++;
        return cont === 4;
    }
}

9. The option scrollOverflowReset admits more values

SollOverflowReset now admits non-boolean values too. (true, false, slides, sections). Using slides, for example, will only reset the scroll position to the top when changing to another horizontal slide and not when sliding vertically.

10. New option scrollOverflowMacStyle

When using the scrollbar, as we are now using the default scroll, it can look a bit less stylish on windows devices. You can choose to use a more subtle scroll bar like the one used on Apple devices by using turning on scrollOverflowMacStyle.

11. New methods getScrollY() and getScrollX()

These two methods will provide a way to get the Y and X position of the whole page.

You can red more about them on the fullpage.js documentation.

FAQs

You might also find these articles relevant: