Smooth Fullscreen Page Slideshow With Vanilla JavaScript – FullScroll

Category: Javascript , Slider | December 19, 2015
Author: RapidtSoftware
Views Total: 2,700
Official Page: Go to website
Last Update: December 19, 2015
License: MIT

Preview:

Smooth Fullscreen Page Slideshow With Vanilla JavaScript – FullScroll

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 );

You Might Be Interested In:


Leave a Reply