Vertical & Horizontal Page Scrolling Plugin with jQuery - ALXS Slidestack

ALXS Slidestack is a jQuery fullscreen page slider plugin designed for one page scrolling website that enables you to navigate through page sections with custom easing effects based on jQuery UI. Supports almost any media types such as text, images, videos and audios.

Basic usage:

1. Load jQuery library and the jQuery ALXS Slidestack plugin in the html page.

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="js/jquery.slidestack.js"></script>

2. Load the required jQuery UI for easing effects.

<script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

3. Split your webpage into several content slides following the markup like this:

<div id="page">
  <div id="wrapper">
    <div id="slidestack">
      <div class="slide">
        <div class="slide-container">
          Slide One
        </div>
      </div>
      <div class="slide">
        <div class="slide-container">
          Slide Two
        </div>
      </div>
      <div class="slide">
        <div class="slide-container">
          Slide Three
        </div>
      </div>
    </div>
  </div>
</div>

4. Make the page slider full window.

.slide-container {
  margin: 0 auto;
}

5. Initialize the plugin to generate a vertical scrolling page slider.

$(document).ready(function() {
  $('#slidestack').slidestack();
});

6. Customization options.

$(document).ready(function() {
  $('#slidestack').slidestack({

    // Main overall wrapper for the slides
    wrapper:   "#slidestack", 

    // Slide class
    section:   ".slide", 

    // Slide inner container
    inner:   ".slide-container", 

    // Can use HEX colors or RGB(A)
    bgColor:   "transparent", 

    // In milliseconds
    speed:  1000, 

    // Any jQuery easing type (jQuery UI compatible)
    easein:  'easeOutCirc', 
    easeout:  'easeOutCirc',
    
    // Next page link class (minus the dot)
    linkmore:   'next-slide', 

    // Previous page link class (minus the dot)
    linkless:   'prev-slide', 

    // Next page link image, 'false' or src url
    linkmoreimage:   'img/arrow-down.png', 

    // Previous page link image, 'false' or src url
    linklessimage:   'img/arrow-up.png', 

    // Can use HEX colors or RGB(A)
    linkcolor:  '#FFF', 

    // Can use HEX colors or RGB(A)
    linkbackground:  'transparent', 

    // Available settings - 'updown', 'sides', 'horizontal' and 'vertical'
    linklayout:  'vertical',  

    // 'left' & 'right' for vertical layout, 'top' & 'bottom' for horizontal layout
    linkposition:    'right', 

    // Link vertical margin
    linkvmargin:  '0.5rem', 

    // Link horizontal margin
    linkhmargin:  '3rem', 

    // Link padding
    linkpadding:  '0.5rem 0', 

    // Link height
    linkheight:  '35px', 

    // Link width
    linkwidth:  '60px', 

    // Link border radius
    linkradius:  '5px', 

    // Use CSS border shorthand for this, or just 'none'
    linkborder:  'none', 
    
    // Enable container padding to account for links
    padenable:   'true', 

    // Container padding amount, takes size value or 'linksize'
    padvalue:   'linksize'
    
  });
});

---

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