Mobile-first JavaScript Full Page Slider – fullpage.js

Category: Javascript , Slider | July 31, 2018
Author:kisnows
Views Total:1,404 views
Official Page:Go to website
Last Update:July 31, 2018
License:MIT

Preview:

Mobile-first JavaScript Full Page Slider – fullpage.js

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

You Might Be Interested In:


3 thoughts on “Mobile-first JavaScript Full Page Slider – fullpage.js

  1. leonardeshuis

    mobile only instead of mobile first

    get this message : Only works on mobile devices with touch enabled.

    Reply
  2. kisnows

    I already upgrade this project .Now it can work not only on mobile devices with touch enabled,and work on all this browser :Android 4.1+Safari 7.1+IE EdgeOperaChrome
    And provide more controller:
    * mouseWheel
    * keyboard.
    If you want know more about this project,you can go there: https://github.com/kisnows/fullpage-light.js

    Reply

Leave a Reply