Overview

This is a jQuery content slider using the parallax-effect. You can create as many layers and sublayers as you want. You can use images or any other HTML elements, including Flash movies as layers. The script is very user-friendly, you can add global settings or local (per slide) settings to each layer or sublayer. You can change delay times, easing types, durations and much more.

Thank you

Thank you for purchasing this product. If you have any questions that are beyond the scope of this documentation, please feel free to email us.

Features

• Use with ANY content you want (images, HTML elements, Flash movies, YouTube videos, etc.)
  (best view with semi-transparent PNG images or CSS3 styled HTML elements)
• Sliding from / to 4 directions or fading in / out (sublayers only)
• Unlimited number of layers / sublayers
• Multiple animations and easing
• Automatic slideshow function (optional: Backwards-Slideshow)
• Preload function
• Customizable UI
• Easy per-layer settings with rel or style tags
• Powerful API with callback functions
• Keyboard navigation
• Touch control for mobile devices (iOS tested)
• Skin support
• SEO friendly
• Multiple browser support (IE 7+, Safari 3+, iOS Safari, Chrome 3+, Firefox 3+, Opera 10+)
• Detailed Documentation

Changelog

1.6

• now sublayers supports fading transition
• added slideoutdirection property to sublayers
• added global background color / background image support
• fixed '1px gap' bug
• fixed one layer bug
• fixed swing, linear and easeInOutQuint animations
• fixed hover on pause / stop bug
• fixed wrong directions of animations if navigating by slidebuttons
• fixed durationout property for sublayers

1.5

• added touch control for mobile devices
• now supports rel tags for properties
• added slidedirection property for sublayers too
• added pauseOnHover feature
• added a powerful API with callback functions

1.0

• first release

Requirements

jQuery

Because this is a jQuery plugin, you'll need jQuery and jQuery Easing JS or jQuery's UI's Effects Core to run it.

• jQuery 1.4+
• jQuery Easing JS or jQuery UI Effects Core 1.8.9+
• recommended: valid xHTML or HTML 5 markup

Browser Support

• Mozilla Firefox 3+
• Google Chrome 10+
• Safari 3+
• iOS Safari
• Opera 10+
• Internet Explorer 7+

Usage

Please note, that the following source codes are in HTML 5 markup.
If you are using xHTML, please be aware of the differences.

Setup

Include the following lines into the head section of your page. Of course the path can be different, depending where is layerslider folder on your server.

Loading the Script

You have to run this plugin like any other jQuery plugins:

						$(selector).layerSlider();

For example: if your LayerSlider container has an id named slider, the correct call method will be:

							$('#layerslider').layerSlider();

HTML Markup

Create HTML markup for layers into the body section of your page. A typical HTML markup for the script looks like this:

As you can see, we created two layers with adding class named ls-layer to the divs - in this case the slideshow will have only two complete screens. We also put sublayers into layers - these are images, but you can use any type of content you want, including HTML code, or Flash movies too.

There are a special sublayer, it is called background and it has a class named ls-bg. The parallax-effect does not apply to background sublayers - so they are always staying in the background of the parent layer. (Otherwise you can add background-images to layers too.)

Other sublayers have a class named ls-lnumber. This number is a positive integer and it is important because of the parallax effect: sublayers with higher number will animate faster and therefore it seems that you see the whole animation in 3D.

Obviously you can create unlimited sublayers and they can have the same class too.

Global Settings

You can use the following - global - settings which are applied to the container of the slider. If you run multiple sliders on the same page, you can add different settings to each sliders. Note, that these are case sensitive.

						$('#slider').layerSlider({

							autoStart			: true,
							firstLayer			: 1,
							twoWaySlideshow		: false,
							keybNav				: true,
							imgPreload			: true,
							navPrevNext			: true,
							navStartStop		: true,
							navButtons			: true,
							skin				: 'default',
							skinsPath			: '/layerslider/skins/',
							pauseOnHover		: true,
							globalBGColor		: 'transparent',
							globalBGImage		: false,

							// you can change this settings separately by layers or sublayers with using html style attribute

							slideDirection		: 'right',
							slideDelay			: 4000,
							parallaxIn			: .45,
							parallaxOut			: .45,
							durationIn			: 1000,
							durationOut			: 1000,
							easingIn			: 'easeInOutQuint',
							easingOut			: 'easeInOutQuint',
							delayIn				: 0,
							delayOut			: 0

						});

autoStart : true or false
If true, slideshow will automatically start after loading the page.

firstLayer : number (positive integer)
LayerSlider will begin with this layer.

twoWaySlideshow : true or false
If true, slideshow will go backwards if you click the prev button.

keybNav : true or false
Keyboard navigation. You can navigate with the left and right arrow keys.

imgPreload : true or false
Image preload. Preloads all images and background-images of the next layer.

navPrevNext : true or false
If false, Prev and Next buttons will be invisible.

navStartStop : true or false
If false, Start and Stop buttons will be invisible.

navButtons : true or false
If false, slide buttons will be invisible.

skin : 'name_of_the_skin'
You can change the skin of the Slider. You can read more abut this at Skin support.

skinsPath : 'path_of_the_skins_folder/'
You can change the default path of the skins folder. Note, that you must use the slash at the end of the path.

pauseOnHover : true or false
If ture, SlideShow will pause when you move the mouse pointer over the LayerSlider container.

globalBGColor : CSS color methods
Background color of LayerSlider. You can use all CSS methods, like hexa colors, rgb(r,g,b) method, color names, etc. Note, that background sublayers are covering the background.

globalBGImage : URL of the background image
Background image of LayerSlider. This will be a fixed background image of LayerSlider by default. Note, that background sublayers are covering the global background image.

The following global settings can be override separately by each layers or sublayers local settings.

slideDirection : 'left', 'right', 'top', 'bottom' or 'fade' *
Slide direction. New layers sliding FROM(!) this direction.
* From version 1.6 you can use the fade parameter if you want to fade in / out a sublayer instead of sliding. Note, that fade is working ONLY on sublayers but not on layers so if you want to fade in / out a sublayer (instead of sliding), you have to add the slidedirection or the slideoutdirection property to that sublayer and you cannot use fade as a global property! See the Local Settings below.

slideDelay : number (millisecs)
Time before the next slide will be loading.

parallaxIn : number
Modifies the parallax-effect of the slide-in animation.

parallaxOut : number
Modifies the parallax-effect of the slide-out animation.

durationIn : number (millisecs)
Duration of the slide-in animation.

durationOut : number (millisecs)
Duration of the slide-out animation.

easingIn : easing (all easing types of jQuery UI Effects Core can be used)
Easing (type of transition) of the slide-in animation.

easingOut : easing or (all easing types of jQuery UI Effects Core can be used)
Easing (type of transition) of the slide-out animation.

delayIn : number (millisecs)
Delay time of the slide-in animation.

delayOut : number (millisecs)
Delay time of the slide-out animation.

Local Settings

Some of the above settings you can apply uniquely to a layer or a sublayer. For example, if you want to add an extra slide direction and slide delay property to a layer, use the following code:

As you can see, we used the style tag to add properties.* Another example, we are adding some other properties to a sublayer:

* From version 1.5, you can use both rel and style tags to add properties. Some older browser (like Firefox 2) doesn't allow to add custom properties into style tag, so in that case you can use rel tag.

You can add this properties to layers:

• slidedirection
• slidedelay
• durationin
• durationout
• easingin
• easingout
• delayin
• delayout

You can add this properties to sublayers:

• slidedirection *
• slideoutdirection **
• parallaxin
• parallaxout
• durationin
• durationout
• easingin
• easingout
• delayin
• delayout

* From version 1.5, you can add the slidedirection property to the sublayers too. So you can animate some sublayers for example from top as the main layer is sliding from left. You can use all four directions at the same time with different sublayers inside a main layer!

** From version 1.6, you can add the slideoutdirection property to the sublayers. So you can set the slide out animation independent from the slide in animation. You can also use the fade parameter if you want to fade out a sublayer.

LayerSlider API

We added an API to make more comfortable the usage of this script.
The API can be divided into three parts:

1. The LayerSlider Data Object

Sometimes you may need to know the current layer index or for example if the script is even animating or not. Now you can get the whole LayerSlider object with realtime values of variables at any time. Just call the $(your-layerslider-container).layerSlider('data'); function and you can get back this object. Try this:

							var lsdata = $(your-layerslider-container).layerSlider('data');
							alert(lsdata.g.curLayerIndex);

This will show you the current layer index.
You can get ALL the events and variables in real time, but the more important are the following:

• lsdata.g.curLayer (jQuery object of the current layer)
• lsdata.g.curLayerIndex (current layer index)
• lsdata.g.isAnimating (true or false)
• lsdata.g.layersNum (number of layers)
• lsdata.g.autoSlideshow (true or false, slideshow is running if true)

2. Callback functions

You can use some callback functions too. You have to define these functions with the global settings:

							$('#slider').layerSlider({
								
								...

								global settings

								...

								cbStart			: function(){ yourcode },	// Calling when you click the slideshow start button.
								cbStop			: function(){ yourcode },	// Calling when click the slideshow stop / pause button.
								cbPause			: function(){ yourcode },	// Calling when slideshow pauses (if pauseOnHover is true).
								cbAnimStart		: function(){ yourcode },	// Calling when animation starts.
								cbAnimStop		: function(){ yourcode },	// Calling when the animation of current layer ends, but the sublayers of this layer still may be animating.
								cbPrev			: function(){ yourcode },	// Calling when you click the previous button (or if you use keyboard or touch navigation).
								cbNext			: function(){ yourcode }	// Calling when you click the next button (or if you use keyboard or touch navigation).

							});

3. Controller functions

You can call these functions to control the slider:

• $('#slider').layerSlider('prev'); if you want to change to the previous layer
• $('#slider').layerSlider('next'); if you want to change to the next layer
• $('#slider').layerSlider(2); if you want to jump to a specified layer
• $('#slider').layerSlider('start'); if you want to start the slideshow
• $('#slider').layerSlider('stop'); if you want to stop the slideshow

Skin support

You can easily add skins to LayerSlider.

Actually there are three skins that you can use. Each of them have a separated folder in /layerslider/skins/. The name of the folder is the name of the skin too. If you open skin.css from any skin folder, you realize, that I used the name of the skin as a css class by the following way:

.ls-name_of_the_skin

If you run LayerSlider with the skin property, it will trying to load skin.css from the folder /layerslider/skin/name_of_the_skin/ and it will add ls-name_of_the_skin css class to LayerSlider container.

So, you can easily load your skin, but don't forget that the path of the skins folder.

						$('#layerslider').layerSlider({
							skin : 'darkskin'
						});

I attached a layered PSD file with the three skins.

Examples

Example 1. - A fully configured slider with local settings (default skin).

Example 2. - Light Skin

Example 3. - Dark Skin

Example 4. - Multiple sliders with multiple skins and settings

Contact us!

If you like our works.
If you need a help in using one of our CodeCanyon items.
If you have a great idea which we can work together.