How to go full screen in JavaScript, jQuery, Vue or React?

Switch to full screen in JavaScript, jQuery, Vue or React? No problem! Use fullPage plugin.

Go full screen with fullPage solution for JS, jQuery, Vue, or React

FullPage.js is fully functional on all modern browsers, as well as some old ones such as Internet Explorer 9, Opera 12, etc. It works with browsers with CSS3 support and with the ones which don’t have it, making it ideal for old browsers compatibility.

The solution also provides touch support for mobile phones, tablets and touch screen computers.

fullpage solution for JS, jQuery, Vue, React and more
fullpage solution for JS, jQuery, Vue, React and more

Setup

Install

npm install fullpage.js

and import/include fullpage.js in your project.

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.

<div id="fullpage"><!--Wrapper-->
  <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>

Initialization with Vanilla Javascript – all we need to do is call fullPage.js before the closing BODY tag:

new fullpage('#fullpage', {
  autoScrolling:true,
  scrollHorizontally: true
});

// methods
fullpage_api.setAllowScrolling(false);

Initialization with jQuery

$(document).ready(function() {
  $('#fullpage').fullpage({
    autoScrolling:true,
    scrollHorizontally: true
  });
  // methods
  $.fn.fullpage.setAllowScrolling(false);
});

License: Open source and Commercial variants

Use the Commercial license for developing non open source project. Otherwise there is GNU General Public License v3.

Full page in Vue.js

https://github.com/alvarotrigo/angular-fullpage

Full page in Vue.js

https://github.com/alvarotrigo/vue-fullpage.js

Full page in ReactJS

https://github.com/alvarotrigo/react-fullpage

Homepage

https://alvarotrigo.com/fullPage/

GitHub
https://github.com/alvarotrigo/fullpage.js

See also

Vue.js scroll to element solutions

jQuery scroll to anchor – jquery.anchorScroll plugin

jQuery full screen pages made easy – fullPage.js

CSS3 fullscreen background image slideshow – a tutorial

Responsive ReactJS carousel gallery: react-image-gallery

Enjoy!