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>
</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>
</div>
Initialization
Initialization with Vanilla Javascript
new fullpage('#fullpage', {
//options here
autoScrolling:true,
scrollHorizontally: true
});Initialization with jQuery
$(document).ready(function() {
$('#fullpage').fullpage({
//options here
autoScrolling:true,
scrollHorizontally: true
});
//methods
$.fn.fullpage.setAllowScrolling(false);
});
