Simple FullScreen Page Slider Plugin with jQuery - sliderFS

sliderFS is a jQuery fullscreen page slider plugin which splits your page into several sections so that the visitor can navigate between them with bullets navigation, mouse drag or touch swipe.

How to use it:

1. Load the latest jQuery library and jQuery sliderFS plugin in the document.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="jquery-slider-fullscreen.js"></script>

2. Create content slides following the markup structure like this:

<div class="divSlider" data-slider="main">
  <div class="container">
    <div class="slide">
      <section class="slideContent">
        <header>
          <h1>Slide 1</h1>
        </header>
        <div class="content">
          <p>This is the first slide of three</p>
        </div>
        <footer>
          <p>Footer 1</p>
        </footer>
      </section>
    </div>
    <div class="slide">
      <section class="slideContent">
        <header>
          <h1>Slide 2</h1>
        </header>
        <div class="content">
          <p>This is the second slide of three</p>
        </div>
        <footer>
          <p>Footer 2</p>
        </footer>
      </section>
    </div>
    <div class="slide">
      <section class="slideContent">
        <header>
          <h1>Slide 3</h1>
        </header>
        <div class="content">
          <p>This is the third slide of three</p>
        </div>
        <footer>
          <p>Footer 3</p>
        </footer>
      </section>
    </div>
  </div>
</div>

3. Call the plugin to enable the page slider.

$(document).ready(function () {
  $('.divSlider').sliderFS();
});

4. Default options available.

$('.divSlider').sliderFS({

width: $(window).width(),
height: $(window).height(),
autoAnimate: true,
interval: 5000,
displayMenu: true,
menuPosition: 'over-bottom',
menuContainer: ''

});

Change log:

2015-01-25

• Added arrows
• Fixed arrows z-index

---

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