LayerSlider WP
The WordPress Parallax Slider
Documentation
Overview
This is a WordPress plugin of the LayerSlider! You can create as many layers and sublayers as you want. You can use unlimited images with links. 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
- WYSIWYG editor (Real-time dragging, reordering and styling layers and sublayers)
- 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
- WordPress-free version of the script is included!
Changelog
1.6.0
- now supports any HTML content with CSS styling!
- now sublayers supports fading transition
- added slideoutdirection property to sublayers
- added global background color / background image support
- added a possibility to name and reorder layers
- fixed LayerSlider widget
- fixed '1px gap' bug
- fixed one layer bug
- fixed empty sublayer 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
- fixed reordering sublayers
1.5.1
- minor bugfixes
1.5.0
- first release
Installation
1. - Copy the layerslider-wordpress-plugin/LayerSlider folder into your WordPress wp-content/plugins/ folder using your favorite FTP program.
2. - Go to your WordPress "Manage Plugins" page, find the "LayerSlider" in your plugins list and click on activate.
Once the plugin has been activated you will notice a new menu on the side called "LayerSlider" enabling you to manage the options for the plugin.
3. - It is important to create a folder named uploads with write permissions in wp-content - if you didn't have it already.
Usage
Creating new slider
You can create unlimited sliders. Of course, each slider can have different settings and layers. If you create a new one you will see first the global settings page of this slider.
Global Settings
You can modify the global settings of each slider. You can set the width / height and other properties. For more information, please read the complete documentation of the script.
The WYSIWYG editor
We created an editor where you can easily upload your images (which can be sublayers), or you can add custom HTML codes. You can set the order and positions of the sublayers too by dragging them to anywhere inside the layer. You can set almost every settings with simple point and click.
Creating layers (slides)
To create a new layer, click on Add New Layer button.
A new box will appear with some inputs and select boxes. To add a background to this layer, click into the input of the Background. In the popup window you can upload your picture, or you can browse the previously uploaded pictures on the Media Library tab. Choose a picture, scroll down and click on the Insert into Post button.
The selected picture will appear as the background of the current layer.
After that you can edit the settings of the layer for example SlideDirection, Durations, etc.
Creating sublayers
You will notice, that there is an empty sublayer also. You can change the type of the sublayer. It can be image or some other pre-defined HTML elements, like div, p, span and heading tags. If you want to add a custom HTML element, select div, and type your own html code into the HTML input. You add custom CSS styles to HTML elements by adding them to Style input like in CSS, for example: width: 300px; color: #fff; ...
If you choose image as a type of sublayer, click into the input of Image and upload an image or choose it from Media Library. After that you can add a link to this sublayer if you want. You can set the target of the link of course.
As you can see, there are many settings available for sublayers. The most of them are self-evident, but you can find all in the complete documentation except one, this is P.level.
P.level means Parallax Level and it is a positive integer. The script uses this number to show Parallax Effect correctly. Sublayers with higher number will be animating from farther - seems like animating faster - and sublayers with lower number will animating slower. If you want to create a realistic effect, try to increase this number by two per sublayer. For example: 2, 4, 6 ,8 ...
You can create as many sublayers you want by clicking the Add New Sublayer button.
Setting the orders and the positions of layers and sublayers
You can set the position of a sublayer by setting the value of the left and top input fields. You can set their position also by dragging them. To do this, select the sublayer by clicking the first checkbox of the row. You'll notice, that all other sublayers will be semi-transparent. Now you can drag and move the selected sublayer to the required position. If you want to change the order of the layers, grab the whole row with this handler 
and drag it up or down.
Of course you can remove layers, sublayers or sliders too.
IMPORTANT: Don't forget to click on the Save Changes button if you are ready with the settings!
Naming and reordering layers
You can add a name to any layer and you can reorder them by clicking the Reorder Layers button. Don't forget to Save Changes after you finish reordering.
Using the LayerSlider Widget
Drag & Drop the Widget to the area of your theme where you want this should be placed.
Using the LayerSlider Shortcode
You can use a shortcode too to display a LayerSlider widget in any page or post.
[layerslider id="1" title="LayerSlider"]
The id is the number of the slider. (You can find this number in the title of each slider tab at the admin page.) The title parameter is optional.
Inserting LayerSlider into a Theme
You can insert LayerSlider into a Theme by the following way:
<?= do_shortcode('[layerslider id="1"]'); ?>
If you want to define a new widget area, follow the instructions here: http://codex.wordpress.org/Widgetizing_Themes
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