New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact

Categories
Other Sections
Sweet Ads
Compatibility
Bookmark online:


FF2+ IE8+ Opr9+

Parallax Slider

Author: Dynamic Drive

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):

A cairn is a man-made pile (or stack) of stones, used as trail markers in many parts of the world. -Wikipedia
“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?”
- Susan Gordon Lydon
“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.”

- Kamal Ravikant
Cally Lily is a perennial plant, evergreen where rainfall and temperatures are adequate. -Wikipedia
“Problems that remain persistently insoluble should always be suspected as questions asked in the wrong way”

Alan Wilson Watts
Back | Forth


Directions Developer's View

Step 1: Add the following CODE to the <head> section of your page:

Select All

The code references the following files, which you should download below:

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:

Select All

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:

options Description
wrapperid

Required

The ID of an empty DIV container on your page that will show a Parallax Slider. The corresponding DIV on the page should carry a matching unique ID and a specific CSS class:

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

displaymode

defaults to {type:'auto', pause:2000, stoponclick:false, cycles:2, pauseonmouseover:true}

Sets the primary attributes of your slider, from whether this is an automatic or manual slider, the pause between slides, the number of cycles before the slider stops in automatic mode, to whether the slider should pause onMouseover:

{type:'auto', pause:3000, cycles:2, stoponclick:false, pauseonmouseover:true},

The "type" option should be set to either "auto" or "manual", for automatic or manual rotation, respectively.

The "cycles" option when set to 0 will cause the slider to rotate perpetually in automatic mode, while any number larger than 0 means it will stop after x cycles.

The "pausemouseover" option when set to true will cause the slider to pause when the mouse rolls over it in automatic mode.

slideduration

Defaults to 500

The duration of the sliding effect when transitioning from one slide to the next, in milliseconds.
delaybtwdesc

Defaults to 500

Sets the pause between the introduction of each description DIV inside a slide (<div class="slide">) in milliseconds, which creates the parallax effect. A description DIV is identified by either <div class="bgoverlay"> or <div class="desc"> inside each slide.
navbuttons

Required

An array slider to the paths of the 4 images that make up the navigational buttons that get automatically added to the slider, in that order:

['left.gif', 'right.gif', 'up.gif', 'down.gif'], // path to nav images

activeslideclass

Defaults to "selectedslide"

An arbitrary CSS class that gets added to the currently shown slide's DIV (in addition to the shared "slide" class). This class is removed when the slide is no longer the active one. It lets you apply additional styling via CSS to the currently shown slide.
orientation

Defaults to "h"

Set to either "h" or "v" to cause the slider to scroll the slides from left to right (horizontally), or up down (vertically) instead.
persist

Defaults to true

Boolean variable that decides whether the slider should remember and recall the last viewed slide within a browser session when the page is reloaded.

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 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.

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.