Mobile-first JavaScript Full Page Slider – fullpage.js

Preview:

Description:

fullpage.js is a tiny, standalone JavaScript library for creating a basic full page content slider for smart mobile devices with touch enabled.

Basic usage:

Include the fullpage.js at the bottom of the document.

<script src="src/js/fullpage.js"></script>

Add custom slides to the full page slider as follows.

<div id="sectionContent" class="section-content">
  <div class="section">
    <div class="slide-wrap">
      <div class="slide">Slide1</div>
      <div class="slide">Slide2</div>
      <div class="slide">Slide3</div>
      <div class="slide">Slide4</div>
      <div class="slide">Slide5</div>
    </div>
  </div>
  <div class="section">Vertical Slide 2</div>
  <div class="section">Vertical Slide 3</div>
</div>

Initialization.

fullpage.init('#sectionContent');

Initialize the full page slider with optional settings.

fullpage.init('#sectionContent',{
  threshold: 10, 
  pageSpeed: 600, 
  afterLoad: null, 
  beforeLeave: null
});

API.

// initialize the slider
init(el,options)
// move to a specified slide
moveTo(index,slideIndex)
// move to next slide
moveToNext(callback)
// move to previous slide
moveToPre(callback)
// slide to next slide
slideToNext()
// slide to previous slide
slideToPre()

Changelog:

07/31/2018

• fixed nowPage index