-
Notifications
You must be signed in to change notification settings - Fork 7.3k
Migration from fullPage v3 to fullPage v4
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:
These are the main breaking changes:
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 uses flexbox to align the content vertically instead of display: table-cell.
.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>.fp-table{
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
}<div class="section fp-table">
Vertically centerd
</div>The way the license is validated has changed and most extension have suffered from changed 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)
fullPage.js v4 will make use of CSS snaps to fit sections automatically when using the option fitToSection: true.
This makes the use of fitToSectionDelay unnecessary and unfeasible to implement.
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).
This option was providing full compatible support for callbacks using the signature/params of fullpage.js version 2.
Because fullPage.js won't use the external vendor anymore, this option was also removed.
No comments :) Feel free to use fullPage.js v3 if you need support for legacy web browsers.
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: [
'<img src="https://img.icons8.com/ios-filled/50/000000/reply-arrow.png"/>',
'<img src="https://img.icons8.com/ios-glyphs/30/000000/arrow.png"/>'
],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.
fullPage.js will detect sections getting hidden when resizing the viewport and completely ignore them when hidden.
You will be able to scroll beyond fullPage.js container and have a normal page underneath it.
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:
slideArrowverticalNavhorizontalNavkeydownwheelmenu
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.
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);
},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;
}
}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.
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.