README

fullPage.js
!preview
!compatibility


  English |
  Español |
  Français |
  Pусский |
  中文 |
  한국어 | 
   日本語 | 
  Português Brasileiro



	Available for Vue, React and Angular.


---

!fullPage.js version



  |   Created by @imac2

- Demo online | Codepen
- Wordpress plugin for Gutenberg and WordPress plugin for Elementor
- Wordpress theme
- fullpage.js Extensions
- Frequently Answered Questions
- [[Migration from fullPage v3 to fullpage v4]](https://alvarotrigo.com/fullPage/help/migration-from-fullpage-3/)
---

A simple and easy to use library that creates fullscreen scrolling websites (also known as single page websites or onepage sites) and adds landscape sliders inside the sections of the site.

- Introduction
- Compatibility
- License
- Usage
  - Creating links to sections or slides
  - Creating smaller or bigger sections
  - State classes added by fullpage.js
  - Lazy loading
  - Auto play/pause embedded media
  - Use extensions
- Options
- Methods
- Callbacks
- Reporting issues
- Contributing to fullpage.js
- Changelog
- Build tasks
- Resources
- Who is using fullpage.js
- Donations
- Sponsors

 Introduction
Suggestion are more than welcome, not only for feature requests but also for coding style improvements.
Let's make this a great library to make people's lives easier!

 Compatibility
fullPage.js is fully functional on all modern browsers and with IE 11. If you need to support IE 







Using Webpack, Browserify or Require.js? Check how to use fullPage.js with module loaders.

 Optional use of CDN
If you prefer to use a CDN to load the needed files, fullPage.js is in, JSDelivr, UNPKG, CDNJS and others.

 Required HTML structure
Start your HTML document with the compulsory HTML DOCTYPE declaration on the 1st line of your HTML code. You might have troubles with sections heights otherwise. The examples provided use HTML 5 doctype .

Each section will be defined with an element containing the section class.
The active section by default will be the first section, which is taken as the home page.

Sections should be placed inside a wrapper ( in this case). The wrapper can not be the body element.

html

	Some section
	Some section
	Some section
	Some section



If you want to define a different starting point rather than the first section or the first slide of a section, just add the class active to the section and slide you want to load first.

html
Some section


In order to create a landscape slider within a section, each slide will be defined by default with an element containing the slide class:

html

	 Slide 1 
	 Slide 2 
	 Slide 3 
	 Slide 4 



You can see a fully working example of the HTML structure in the simple.html file.

 Initialization

 Initialization with Vanilla Javascript
All you need to do is call fullPage.js before the closing  tag.

javascript
new fullpage('fullpage', {
	//optio

Top issues

Latest release

- Enhancement: new option cinematic to use the Cinematic extension
- Fixed bug: regression. Section padding not respected 4736