Here, in this article, we are discussing how to install fullpage.js and how it worked in one of our project. It’s a simple but effective library that builds fullscreen scrolling websites and creates landscape sliders inside the site’s sections. Basically, it’s used for single-page websites.
To install the plugin, 1st you need to download the Fullpage.js package (https://github.com/alvarotrigo/fullpage.js/archive/master.zip ). Try to download minified files. So that it’ll be much faster to load the website. And don’t try to edit these downloaded files.
From this, we need to include the javascript file fullpage.min.js and css file fullpage.min.css.if you need to use easing effects instead of ‘easeInOutCubic’, you can use easings.min.js file.
For example:
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.20/fullpage.min.css" type="text/css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.20/vendors/easings.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.20/fullpage.min.js" type="text/javascript"></script>
The HTML structure is as follows:
<div id="fullpage">
<div class="section">Some section</div>
<div class="section active">Some section</div>
<div class="section">
<div class="slide"> Slide 1 </div>
<div class="slide"> Slide 2 </div>
<div class="slide"> Slide 3 </div>
</div>
<div class="section">Some section</div>
<div class="section">Some section</div>
</div>
An element with the class ‘section’ will be used to define each of the sections. By default, the first section will be active or will show as the main screen. If you need to show some other section when the page loads, you can use the class ‘active’ for the ‘section’ as shown in the above example.
If you need to add a horizontal slider within the section, you need to define a class ‘slide’ for each slide within the section. And this full page js will work only when these sections are wrapped inside a div with the id ‘full page’ as seen in the above example.
After adding all of these, you need to initialize this with jQuery as shown below:
$(document).ready(function() {
$('#fullpage').fullpage({
navigation:true,
navigationPosition:'right'
});
});
For more detailed documentation, you can refer to Fullpage Documentation (alvarotrigo.com).
Reach out to Sreyas for the best website designing services. We provide our services and support globally. Sreyas is also a leading software development, mobile app development, and e-commerce development company.
