Parallax Slider

Download   Demo

This content slider incorporates a parallax scrolling effect where each slide and its contents glide into view at different speeds, creating a captivating visual experience. Visual intrigue aside, however, Parallax Slider is an easy to customize, responsive slider that can adapt to different screen and device sizes, by supporting a percentage value as its width.

Features

• Entire contents of slider defined via HTML markup. Each slide consists of a  background image layer plus any number of content layers.  Each layer within the slide is glided in sequentially after a slight delay following the previous.


• The Slider supports two orientations- horizontal (default), or vertical (up down scrolling) instead.


• Slider supports either fixed or fluid (percentage) dimensions via CSS, allowing for a responsive slider.


• Slider can be set to automatically rotate and optionally stopping after x cycles.


• Persistence of last viewed slide supported, so when the user reloads the page, the slider resumes from the last slide.


• Slider automatically pauses onMouseover.

1. INCLUDE CSS AND JS FILES

<link rel="stylesheet" type="text/css" href="parallaxslider.css" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="jquery.velocity.min.js"></script>
<script type="text/javascript" src="jquery.touchSwipe.min.js"></script>

<script src="parallaxslider.js" type="text/javascript">

2. HTML

<div id="myparallaxslider" class="parallaxslider">

	<div class="slide">
		<div class="bgoverlay" data-bgimage="zenrocks.jpg"></div>
		<div class="desc">A cairn is a man-made pile (or stack) of stones, used as trail markers in many parts of the world. -Wikipedia</div>
		<div class="desc">
			<div style="position:absolute; bottom:15px; left:30px; width:250px; background:black; font:normal 105% Germand; padding:10px; font-style:italic; border-radius:10px; line-height:1.4em;">
			“Letting go is the lesson. Letting go is always the lesson. Have you ever noticed how much of our agony is all tied up with craving and loss?” <br />- Susan Gordon Lydon 
			</div>
		</div>
	</div>

	<div class="slide">
		<div class="bgoverlay" data-bgimage="callalilies.jpg"></div>
		<div class="desc">
			<div style="position:absolute; width:150px; right:10px; line-height:1.5em; background:#E2AF16; padding:10px; border-radius:7px">“The things I carry are my thoughts. That's it. They are the only weight. My thoughts determine whether I am free and light or burdened.” <br /><br />- Kamal Ravikant
			</div>
		</div>
		<div class="desc">
			<div style="position:absolute; bottom:1em">Cally Lily is a perennial plant, evergreen where rainfall and temperatures are adequate. -Wikipedia
			</div>
		</div>
	</div>

	<div class="slide">
		<div class="bgoverlay" data-bgimage="leaf.jpg"></div>
		<div class="desc">
			<div style="position:absolute; top:40%; background:#754B08; font:normal 100% Germand; padding:10px; font-style:italic; border-radius:10px">
			“Problems that remain persistently insoluble should always be suspected as questions asked in the wrong way” <br /><br />Alan Wilson Watts
			</div>
		</div>
	</div>

	<div class="slide">
		<div class="bgoverlay" data-bgimage="rowan.jpg"></div>
		<div class="desc" style="padding:0">
			<img src="strip1.jpg" style="position:absolute; top:0; opacity:0.9" />
		</div>
		<div class="desc" style="padding:0">
			<img src="strip2.jpg" style="position:absolute; top:135px; opacity:0.9" />
		</div>
		<div class="desc" style="padding:0">
			<img src="strip3.jpg" style="position:absolute; top:259px; opacity:0.9" />
		</div>
	</div>

</div>

<a href="javascript:firstparallaxslider.navigate('back')">Back</a> | <a href="javascript:firstparallaxslider.navigate('forth')">Forth</a>

Understanding the structure of the parallax slider’s markup

The slider’s markup consists of a main DIV with an unique ID and CSS class of =”parallaxslider”. Then for each slide, it consists of the following:

• A <div class=”bgoverlay”> element to display a background image. Use the data-bgimage attribute to specify the full path to the background image, which is easier than using CSS’s style=”background:url(…)”, though the later method also works.


• Any number of <div class=”desc”> elements to show arbitrary pieces of content that slide in one after the next. This DIV acts as a content holder, and should not be modified in any way via CSS, such as add padding/ margin or CSS positioning to it. Instead, define contents inside this DIV and stylize those contents to achieve the desired contents positioning and look. The following shows two examples of a slide’s markup, one correct, one incorrect:
  

  Correct

<div class="desc">
	<div style="position:absolute; width:150px; right:10px;">
		“ The things I carry are my thoughts. That's it. They are the only weight. My thoughts determine whether I am free and light or burdened.” <br /><br />- Kamal Ravikant
	</div>
</div>

Incorrect

<div class="desc" style="position:absolute; width:150px; right:10px;">
	The things I carry are my thoughts. That's it. They are the only weight. My thoughts determine whether I am free and light or burdened.” <br /><br />- Kamal Ravikant
</div>

So as you can see, the <div class=”desc”> tag itself should always be left untouched, with no style added to it.

• All “bgoverlay” and “desc” DIV are animated into view in succession, with a delay as defined by options.delaybtwdesc between them.

3. JAVASCRIPT

Add the below code to the HEAD section of your page:

var firstparallaxslider=new parallaxSlider(
 wrapperid: 'myparallaxslider', //ID of DIV on page to house slider
 displaymode: type:'manual', pause:3000, cycles:2, stoponclick:true, pauseonmouseover:true,
 delaybtwdesc: 500, // delay in milliseconds between the revealing of each description layer inside a slide
 navbuttons: ['left.png', 'right.png', 'up.png', 'down.png'], // path to nav images
 activeslideclass: 'selectedslide', // CSS class that gets added to currently shown DIV slide
 orientation: 'h', //Valid values: "h" or "v"
 persist: true, //remember last viewed slide and recall within same session?
 slideduration: 1000 //transition duration (milliseconds)
);

Parallax Slider