Responsive Full-window Page Slideshow Plugin With jQuery - scheme.js

scheme.js  is a simple, lightweight jQuery page slider plugin which enables the visitor to switch between page sections like a slideshow. The plugin will automatically generate a navigation bar at the bottom of the webpage so the user can navigate between content sections with next/prev links. Great for single page web application or presentation.

Basic usage:

1. The required Html structure for the page slider.

<div class="schemes-group">
  <div class="scheme">
    <div class="scheme-container">
      <div class="container">
        Page 1
      </div>
    </div>
  </div>
  <div class="scheme">
    <div class="scheme-container">
      <div class="container">
        Page 2
      </div>
    </div>
  </div>
  <div class="scheme">
    <div class="scheme-container">
      <div class="container">
        Page 3
      </div>
    </div>
  </div>
</div>

2. Add JQuery library together with the jQuery scheme.js plugin's JS and CSS files into the webpage.

<link rel="stylesheet" href="dist/css/jquery-scheme.css">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="dist/js/jquery-scheme.js"></script>

3. Generate a basic page slider by calling the function on the top container as follow:

$('.schemes-group').scheme();

4. Use the attribute "set-scheme" to specify which page section you want to show.

<button type="button" set-scheme="#scheme2">Scheme 2</button>

<div id="scheme2" class="scheme">
  Page 2
</div>

5. Customize the text shown in the navigation buttons.

$('.schemes-group').scheme({
  button_next: 'Next',
  button_previus: 'Previous'
});

6. Adjust the animation speed when transitioning between page sections.

$('.schemes-group').scheme({
  scheme_speed: 3000
});

---

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