Smooth Fullscreen Page Slideshow With Vanilla JavaScript – FullScroll

Preview:

Description:

A vanilla JavaScript library used to create a fullscreen vertical page slideshow / slider with smooth scrolling and keyboard navigation. Great for creating a fullpage presentation to showcase you works.

How to use it:

Add the fullscroll.css and fullscroll.js to your html document.

<link rel="stylesheet" href="css/fullscroll.css">
<script src="js/fullscroll.js"></script>

Add fullscreen pages to the document.

<div class="fullscroll">
  <h1>Page 1</h1>
  <span>This is page 1.</span>
</div>
<div class="fullscroll">
  <h1>Page 2</h1>
  <span>This is page 2.</span>
</div>
<div class="fullscroll">
  <h1>Page 3</h1>
  <span>This is page 3.</span>
</div>

Create a new FullScroll.

new FullScroll();

You can change the selector of FullScroll pages by adding an option called selector to the FullScroll invocation function.

new FullScroll({ selector: '#container > .my-page-element-selector' });

Execute a function each time that the page is changed.

new FullScroll({ onChange: function(){ /* Do stuff here */ } });

API methods.

// Go to the page with the specfied index.
new FullScroll().goto( 0 );
// Go to the next page.
new FullScroll().next();
// Go to the previous page. 
new FullScroll().previous();
// Get the current page index. 
console.log( new FullScroll().current );