Parallax Slider
Description: 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.
Here's a list of the script's main 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.
Demo (width set to 70% of parent container's):
Back | ForthStep 1: Add the following CODE to the <head> section of your page:
The code references the following files, which you should download below:
- parallaxslider.css
- parallaxslider.js
- jquery.velocity.min.js (v0.2.1) (Github)
- jquery.touchSwipe.min.js (v1.6.6) (Github) (Optional file to auto enable swipe navigation).
Note: The file jquery.touchSwipe.min.js is optional- when included it adds
swipe-to-navigate functionality on touch friendly devices, and on PCs, using
the mouse to swipe. One caveat of this feature is that on PCs, text within
the slider are no longer selectable. If text selection is a requirement, you
can either disable mouse swiping on PCs by setting
fallbackToMouseEvents : false
to true instead inside
parallaxslider.js, or remove the reference
to jquery.touchSwipe.min.js inside the code of Step 1 above to remove swipe
functionality all together (on both mobile and PC devices).
Step 2: Add a following sample markup to your page:
That's it for installation! Lets break down the process now to get a thorough understanding of how to customize the script. First up, the initialization code.
Initialization of the script
To initialize the script to display an instance of Parallax
Slider, call new
parallaxSlider()
in the HEAD section of your page:
var uniquevariable=new parallaxSlider(options)
Where "uniquevariable
" should be an arbitrary but unique variable
(for each instance of Parallax Slider), and options is an object literal
containing the desired settings. For example:
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)
})
Here's an explanation of each setting:
Understanding the structure of the parallax slider's markup
Next up, lets examine the parallax slider markup, which should follow a particular structure:
<div id="myparallaxslider"
class="parallaxslider">
<div class="slide">
<div class="bgoverlay"
data-bgimage="callalilies.jpg"></div>
<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>
<div class="desc">
<div style="position:absolute;
bottom:1em">Cally Lily is a perennial plant, evergreen. -Wikipedia
</div>
</div>
</div>
<!-- Slide 2 html here, same structure as slide 1 -->
</div>
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 thedata-bgimage
attribute to specify the full path to the background image, which is easier than using CSS'sstyle="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.
Styling the parallax slider
The CSS file parallaxslider.css defines the style for the main containers of the parallax slider, much of which you'd probably will just want to leave as is. One area you should customize are the dimensions for your parallax slider, which by default is defined at the very top:
#myparallaxslider{ /* CSS for specific
slider container called #myparallaxslider. */
width:80%;
height:550px;
}
It targets the slider with ID "myparallaxslider
",
which you should change if your parallax slider has a different
wrapper ID. When setting the dimensions of your slider,
you may want to optimize it for smaller screen devices. Setting its width to a
percentage value is a good start, but there's more that can be done. Using the
base dimension settings above as a starting point, the following additional CSS
refines the slider's adaptation in smaller devices:
@media screen and (max-width: 600px){ /*
when window is 600px or less width wise */
#myparallaxslider{
width: 100%; /* expand slider to 100% parent container width */
}
}
@media screen and (max-height: 550px){ /* when window is 550px or less height
wise */
#myparallaxslider{
height: 400px; /* shrink slider height so it doesn't cover up entire height of
window */2
}
}
@media screen and (max-width: 480px){ /* when window is 480px or less */
#myparallaxslider{
height: 320px;
}
}
To properly enable CSS media queries, your page should contain the <meta
name="viewport" content="width=device-width"> meta tag in the HEAD of the page.
See the article "The viewport meta
tag- the key to preparing
a page for mobile devices optimization" for more info.