Simplest Fullscreen Page Slider Plugin with jQuery - NavPages

NavPages is a simple, lightweight, animated jQuery page slider plugin that allows the user to navigate between fullpage content sections by user interaction or programmatically.

How to use it:

1. Load jQuery JavaScript library and the jQuery NavPages plugin at the bottom of your webpage.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="jquery.nav-pages.js"></script>

2. Insert the page sections into your webpage.

<div id="nav-pages">
  <div class="nav-page" id="nav-page-1"> This is Page One
   <a href="#nav-page-2">Go to page 2</a> 
   <a href="#" data-goto-nav-page="#nav-page-3">Go to page 3</a>
  </div>
  <div class="nav-page" id="nav-page-2"> This is Page Two 
    <a href="#" class="nav-page-back">Back</a>
    <a href="#nav-page-3">Go to page 3</a>
  </div>
  <div class="nav-page" id="nav-page-3"> This is Page Three 
    <a href="#" class="nav-page-back">Back</a>
  </div>
</div>

3. Call the plugin on the sectioned pages.

$('.nav-page').navPages();

4. Configuration options.

$('.nav-page').navPages({

  // Set by jQuery selector $(pages).navPages(); 
  // or by the first argument $(parent).navPages(pages);
  pages: $(this),

  // Set by jQuery selector $(parent).navPages(pages);. 
  // This element is used to wrap its contents in a <div> 
  // necessary for pages to render correctly.
  parent: $(this).parent(),

  // $.animate() defaults
  animation: {},

  // 0 based index of which page to show first
  startPage: 0,

  selectors: {

    // This sets the name of the data-* attribute that overrides 
    // the href attribute when a link is clicked.
    goto: 'goto-nav-page',

    // When these elements are clicked, the page navigates in reverse.
    back: '[data-goback-nav-page], .nav-page-back',

    // These elements are ignored when clicked.
    ignore: '[data-ignore-nav-page], .nav-page-ignore',
  },

});

5. APIs.

• goTo(selector): If an element with the selector is found inside the parent then it navigates to that page. Triggers nav-page-nav and nav-page-goto.
• goBack(): Navigates back. Triggers nav-page-nav and nav-page-back.
• settings: The settings used as an object, in case you ever need them.

6. Events.

• nav-page-init: (Arguments: parent) Triggered once page markup is complete and events are bound.
• nav-page-nav: (Arguments: new_page, old_page) Triggered when navigating back or navigating to a page.
• nav-page-goto: (Arguments: new_page, old_page) Triggered when navigating to a page.
• nav-page-back: (Arguments: new_page, old_page) Triggered when navigating back.

Change log:

2015-05-04

• Various speed improvements & new selectors

---

This awesome jQuery plugin is developed by thisispiers. For more Advanced Usages, please check the demo page or visit the official website.