jQuery Content Slider Plugin with Parallax Scrolling Effects - SaucySlider

SaucySlider is a cool jQuery plugin for creating a responsive content slider with CSS3 based smooth horizontal parallax effects. Comes with lots of options to customize the parallax effects using HTML data-* attributes and javaScript properties.

Basic Usage:

1. Link the jQuery javascript library and the jQuery SaucySlider plugin on your webpage.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="saucySlider.js"></script>

2. Create the markup for the main stage, pieces, scenes and layers.

• Stage: The root element that wraps all the pieces.
• Piece: Any element inside the stage that is apart of the parallax animation.
• Scene: A user defined point on the stage where pieces are centered around.
• Layer: A piece's layer value affects its parallax speed.

<div id="stage">
  <-- First Scene -- >
  <div data-scene="0" data-layer="1"></div>

  <-- Second Scene -- >
  <div data-scene="1" data-layer="2"></div>

  <-- Third Scene -- >
  <img src="img/photo.png" data-scene="2" data-layer="0">
</div>

3. Add nav buttons and/or pagers.

<-- Nav Buttons -- >
<button class="next">Foward</button>
<button class="prev">Back</button>

<-- Pagers -- >
<ul class="pagers">
  <li>Scene One</li>
  <li>Scene Two</li>
  <li>Scene Three</li>
</ul>

4. Call the plugin on the stage element.

$('#stage').saucySlider({
  pager: $('.pagers li'),
  nextButton: $('.next'),
  prevButton: $('.prev'),
  scenePoints: [0, 2500, 8000],
  sceneTimes: [3000, 3000, 6000],
  sceneNames: ['First', 'Second', 'Third']
});

5. Background positions can be set to parallax.

<div data-bg-x="1" data-bg-y="1">

6. Pieces can be nested inside one another and move relative to their parents.

<div data-scene="4" data-layer="0">
  <div data-inner data-layer="2">
    I am nested inside another piece!
  </div>
</div>

7. Default values.

scenePoints     : [],   // Whole number pixel value where each scene starts
sceneTimes      : [],   // Miliseconds of transition time between each scene
sceneNames      : [],   // The name of each scene to appear in the URL hash
pager           : false,// jQuery object of all pager elements
nextButton      : false,// jQuery object of the element that triggers the move to the next scene
prevButton      : false,// jQuery object of the element that triggers the move to the previous scene
sceneMoved      : function(a){},    // Callback function when a scene moves
sceneStopped    : function(a){},    // Callback function when a scene stops
sceneCanceled   : function(a){}     // Callback function when a scene is canceled

8. HTML data-* attributes.

• data-scene: Designates which scene the element belongs to
• data-layer: Designates the speed of the element's parallax effects
• data-bg-x: Designates the speed of the element's parallax effects for its horizontal background position
• data-bg-y: Designates the speed of the element's parallax effects for its vertical background position
• data-transition: Used to add other CSS transition values without overriding SaucySlider's transitions

---

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