Fullpage js free

A full page js free library that offers easy creation of fullscreen scrolling websites, also known as single page or onepage sites, with the added ability to add landscape sliders within site sections.

Including files:

<link rel="stylesheet" type="text/css" href="fullpage.css" />

<!-- This following line is optional. Only necessary if you use the option css3:false and you want to use other easing effects rather than "easeInOutCubic". -->
<script src="vendors/easings.min.js"></script>

<script type="text/javascript" src="fullpage.js"></script>

Optional use of CDN

If you prefer to use a CDN to load the needed files, fullPage.js is in CDNJS: https://cdnjs.com/libraries/fullPage.js

HTML structure

Begin your HTML code with the mandatory HTML DOCTYPE declaration, which should be on the first line. Failure to do so may result in inconsistent section heights. The code used in the examples is <!DOCTYPE html> for HTML 5.

Each section will be marked by an element with the class name “section.” The first section, which serves as the home page, will be set as the default active section.

Wrap each section inside a container element, in this case “<div id=”fullpage”>. The container cannot be the “body” element.

<div id="fullpage">
	<div class="section">Some section</div>
	<div class="section">Some section</div>
	<div class="section">Some section</div>
	<div class="section">Some section</div>

To set a different starting point other than the first section or slide, simply add the “active” class to the desired section or slide.

<div class="section active">Some section</div>

To create a landscape slider within a section, each slide is defined using an element with the “slide” class.

<div class="section">
	<div class="slide"> Slide 1 </div>
	<div class="slide"> Slide 2 </div>
	<div class="slide"> Slide 3 </div>
	<div class="slide"> Slide 4 </div>

Initialization with Vanilla Javascript

new fullpage('#fullpage', {
	//options here
	scrollHorizontally: true

Initialization with jQuery

$(document).ready(function() {
		//options here
		scrollHorizontally: true


Download Demo

Posts created 494

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top