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.
About the item
LayerSlider WP is a premium multi-purpose slider for creating image galleries, content sliders, and mind-blowing slideshows with must-see effects, even from your WordPress posts and pages. It uses cutting edge technologies to provide the smoothest experience that’s possible, and it comes with more than 200 preset 2D and 3D slide transitions. It has a beautiful and easy-to-use admin interface with supporting modern features like drag n’drop WYSIWYG slider builder, real-time previews, timeline view, Google Fonts and transition builder for custom animations. It’s device friendly by supporting responsive mode, multiple layouts, touch gestures on mobile devices, and uses techniques like lazy load and conditional script loading for optimal performance. You can add any content into sliders, including images, text, custom HTML, YouTube and Vimeo videos or HTML5 self-hosted multimedia contents. It’s also SEO friendly by allowing you to build semantic markup with custom attributes that search engines can index easily. LayerSlider comes with 13 built-in skins, and it has tons of options to entirely customize the appearance and behavior of your sliders at the smallest detail.
Slider features
-
General Features
- Super smooth hardware accelerated CSS3 transitions with jQuery fallback
- Fully responsive & multiple layouts support
- High compatibility with many fallback features for old browsers
- Lazy loading images for beter performance
- Unlimited layers with image, video, audio, text or custom HTML content
- Powerful API for more customization
- SEO friendly
- Multiple sliders can be added on the same page
- Included free slide transition gallery
- Very detailed documentation with examples
- Unlimited variations of usage (image slider, image slider with text, content slider, video gallery slider, mixed content slider, banner rotator, carousel, etc.)
- Free updates & support
-
Slider Layout & Appearance
- Responsive, full-width, full size or fixed dimensions layout
- Responsive under & Layers container features for full-width sliders
- 13 skins included
- Skins PSD file included for easily creating your own skins
- Option for specifying a global background color or image to the slider
-
Slideshow
- Auto-start slideshow (can be disabled)
- Pause slideshow on hover feature
- Starting with specified slide
- Optional random slideshow feature
- Option for fade in the first slide without animating the layers
- Option for backwards-slideshow (Two way slideshow)
- Loops feature
-
Navigation
- Bullets, hover thumbnails or thumbnails
- Touch navigation on mobile browsers
- Keyboard navigation
- Option for disabling prev / next buttons or bullets
- Option for showing prev / next buttons or bullets on hover
- Two types of timers: bar timer and circle timer
- Option for customizing the thumbnail area and the size of thumbnails
-
Slide Options
- More than 200 2D & 3D transitions
- Option for create your own slide transitions
- Option linking the whole slide
- Option for adding a deep link to a specified slide
-
Layer Options
- Layers can slide (axis free!), fade, rotate (in 2D or 3D), scale and skew, or mixed of these
- Option for setting the transform origin of transition
- Option for linking layers
- Option for adding a link to layers which will change the slider to a specific slide
- Optional parallax effect on layers
-
Video & Audio
- Easy to use with YouTube, Vimeo or HTML5 videos or audios
- Auto-pause slideshow while videos or audios are playing
- Auto-play videos and audios (optional)
- YouTube and Vimeo thumbnail images
-
YourLogo
- Option for adding a fixed image over the slider
- Option for styling and adding a link to this image
-
Compatibility
- Requires jQuery 1.7 (working with 1.10.x or 2.x versions, please note that jQuery 2.x is no more compatible with IE7 and 8!) & Greensock Animation Engine
- Requires WordPress 3.5, compatible with WordPress 3.8+
- Working in Chrome, Firefox, Safari, IE7-11, Opera
- Working in mobile browsers
- Most of the 2D slide transitons are working under all browsers
- The 3D slide transitions are working under Chrome, Firefox, Safari, Opera, iOS and the latest Android versions (2D fallback mode under other browsers)
WordPress specific plugin features
-
Build dynamic sliders from WordPress posts and pages
With advanced filters for finding posts or mixing them with static content
-
WYSIWYG editor with real-time previews
Build sliders with modern techniques like drag n’ drop
-
Timeline view
Review your layer timings like in a movie editor
-
Multisite ready
With network-wide activation support
-
Translation and localization ready
Supports popular plugins like WPML and qTranslate for multilingual sliders
-
Transition builder, Skin and CSS Editors
Customize the built-in skins and transitions easily
-
Automatic updates
Receive update notification and install new versions with one click
-
Import / Export feature
Move sliders between sites easily
-
Plugin permissions
Provide plugin access to different users to collaborate on working sliders
-
Use Google Fonts
With built-in search and configuration options
-
Advanced settings to improve performance
Scripts in the footer, conditional script loading, etc
-
Use self-hosting video & audio
Easily upload and insert HTML5 multimedia contents
-
Sample sliders included
You can see our settings to get started
-
Interactive tooltips and integrated docs
Receive instant help for a specific problem whenever you need it
Third party credits
We are extremely grateful for the people working on the projects below. These guys are making our lives much easier, thus we can focus on building high quality products.
| Project |
Homepage |
Comment |
| jQuery |
jquery.com |
The most popular JavaScript library for building complex web apps. |
| GreenSock |
greensock.com |
The most advanced web animation library to build spectacular transitions. |
| phpQuery |
code.google.com |
A server-side DOM API based on jQuery. |
| FatCow icons |
fatcow.com |
A large and beautiful collection of web icons. |
Installation via WP plugin installer
- Extract the archive file on your machine that you've downloaded from CodeCanyon.
- Navigate to
Plugins -> Add new page on your WordPress admin area.
- Select the
Upload button on the top and choose the "layersliderwp-x.x.x.installable.zip" file that you've extracted from the downloaded archive, then hit the Install Now button.
- WordPress may ask you to enter your FTP login credentials. Click on
Proceed when you finished.
- The plugin is now installed, click on the
Activate Plugin button.
Installation via FTP
- Extract the archive file on your machine that you've downloaded from CodeCanyon.
- Find the "layersliderwp-x.x.x.installable.zip" file in the extracted contents and unpack that archive as well.
- Open your favorite FTP application and connect to your server. Navigate to the "/wp-content/plugins/" folder.
- Copy over the "LayerSlider" folder extracted from "layersliderwp-x.x.x.installable.zip" file.
- Navigate to the
Plugins page on your WordPress admin area and click the Activate button below LayerSlider WP.
Auto-update
Since LayerSlider WP 4.0.0 we are supporting automatic updates. The auto-update feature requires a valid item purchase code; you can find it by navigating to your CodeCanyon downloads page and downloading your License Certificate for the corresponding item. Your Item Purchase code is in the downloaded text file. Please enter this code at the LayerSlider WP main plugin page in the "Auto-updates" box.
Manual update
Once you've downloaded the most recent version from your CodeCanyon downloads page you can deactivate and remove the old version, then install the new one. Your sliders and settings are in the database, removing the plugin won't touch them. The new version always has backwards compatibility, so you don't have to worry about anything.
Changes during updates
Depending on the default settings, you may have to enable or disable some settings related with the new features. If you experience any unwanted behavior change after an update, it is always a good idea to check the settings of your sliders, there are probably new options to control these changes.
How can I create multilingual sliders?
Please read the integrated docs in the plugin by opening a Help menu on the top right corner of your admin area. It includes the necessary instructions about using WPML, qTranslate and other popular localization/translation solutions.
You can also read our online version in our FAQs.
How to translate the admin user interface?
-
Download PoEdit
There are several apps available to help you with translating .PO files. PoEdit is a popular one, and it's available on every major platform. You can download it from here.
-
Start translating
Open the default LayerSlider-en_US.po file from your "/wp-content/plugins/LayerSlider/locales/" folder. When you save your work PoEdit will generate you a .MO file which will be needed to apply your work.
-
Name your files properly
WordPress recognizes your localization by a special formatting of file names. You will need to include the right language and country codes so it can identify what language is your work made for.
For example, a French localization would have the file names: LayerSlider-fr_FR.po and LayerSlider-fr_FR.mo. You must follow this syntax, including the dash, underscore, and lower- or uppercase letters.
-
Apply your localization
Copy your newly created .PO and .MO files into the "/wp-content/plugins/LayerSlider/locales/" folder. WordPress should use them immediately if you named your files properly.
A note on backwards compatibility
We always take care to support sliders built with earlier versions of the plugin, thus you shouldn't have to worry about updates. However, in major releases we are usually making big changes under the hood, and it is possible that you might need to adjust some additional settings.
Old slide transitions are deprecated
We've removed the old slide transition settings from the admin interface. Your previously created sliders will continue to work the same as before, but you won't be able to edit them without choosing from the new slide transitions. Remember, we have some very similar transitions, and you can always modify or build a custom one with the Transition Builder.
We might completely stop supporting the old slide transition system in the distant future.
Old layer transitions are deprecated
In version 5.0.0 we have new layer transition options that offers more complex and flexible animations. Your earlier sliders will continue to work the same as before without making any changes. The admin interface, however, drops the old options in favor of the new system, and your settings will be converted. Since these new options are working in a different way, your sliders might be slightly different in some rare cases, but it should be super close.
We might completely stop supporting the old layer transition system in the distant future.
Video issues
| Symptom |
Description |
| Grey preview image |
Some videos don't have HD preview images, and you might need to lower the preview quality in your slider settings if it shows a grey image with 3 dots. |
| No preview image |
Vimeo treats Pro/Plus videos as private, even if you make them publicly available. This causes the preview image not appearing in the slider. |
Issues related to jQuery
| Symptom |
Description |
| Multiple jQuery issue |
Your site has including the jQuery library twice or more. Please make sure that you removed the unnecessary versions. |
| Old jQuery issue |
To maintain compatibility with new software versions and their new features, our plugins requires newer versions of the jQuery library. Usually, you can use them with jQuery 1.7, but we strongly recommend you to have at least version 1.8 or newer as some of the features of our plugins only works with those versions.
|
| jQuery transit issue |
Your site has including the jQuery Transit library twice or more. Please make sure that you removed the unnecessary versions.
|
Loading problems
| Symptom |
Description |
The slider is not starting
(no loading indicator) |
There are maybe some JS errors on your site. Please check the slider init code and the code of the other scripts. |
The slider is not starting
(loading indicator) |
One or more images are missing from the slider. Please make sure that you didn't mistype the image URLs.
|
Known incompatibilities
| Cause |
Description |
| FitVids JS |
Your videos will have wrong dimensions if you apply FitVids on them within the slider. |
|
Isotope
|
[SOLVED] Using Isotope and jQuery Transit on the same page caused some glitchy transitions. |
It's for developers!
You can skip this part of the documentation if you are not a developer. Our guides in the developer docs were made for theme authors and programmers who want to incorporate the plugin into a larger work, or want to modify and extend its capabilities.
What it has to offer?
Our documentation for developers includes our licensing terms, theme integration guides, plugin APIs, and any other assets you might need to use to work with the plugin beyond its basics.
Open the documentation for developers
Changes in version 5.1.1
- Fixed some appearance issues
- Fixed an issue in the new import method
Changes in version 5.1.0
- Added support for exporting/importing sliders with images
- Added ability to export/import multiple sliders with custom selection
- Added slider slug/alias support
- Added notification of plugin dependencies when detecting issues
- Fixed several issues related to dynamic sliders from posts
- Fixed several issues related to embedded videos
- Fixed timeline view
- Fixed slide linking issue
- Fixed the slide ID attribute
- Fixed issues with relative URLs
- Fixed invalid error messages after saving
- Fixed "Convert" button when updating from outdated versions
- Various other fixes, improvements and interface enhancements
- Extended APIs for developers with extended documentation
Changes in version 5.0.2
- Added [image-url] post placeholder
- Fixed excerpt post placeholder
- Fixed slide transition issues
- Fixed blank slider editor issue
- Fixed loops slider setting
- Fixed HTML5 video sizing issue
- Reduced installable ZIP by dropping old sample sliders to avoid installation problems
- Interface adjustments
Changes in version 5.0.1
- Added Dashicons support
- Fixed file permissions that caused various issues in some cases
- Fixed WPML and better URL handling
- Fixed tag and category list post placeholders
- Fixed locales
- Fixed other small issues, which caused PHP warnings
- Fixed layer transitions if there are no slide background images
- Fixed the starting position of layers with percentage value of width
What's new in version 5.0.0?
-
New features
- Build dynamic sliders from WordPress posts and pages
with advanced filters for finding posts or mixing them with static content
- Use Google Fonts with built-in search and configuration options
- Advanced settings like scripts in the footer, conditional script loading etc. to improve performance
- Parallax Layers - a fancy parallax effect by mouse move
- New layer transitions: rotateX, rotateY and skew with option to set transformOrigin
- Added a new skin
- Easily upload and insert self-hosted HTML5 video & audio
- Option to restore or permanently delete removed sliders
- Bulk actions with option to merge sliders together
- Added “Max-width” option for responsive mode
- Added “Lazy load” option
-
Interface changes
- Major interface revamp
- Using CodeMirror at various places for CSS and JS code editing
- Added timeline view
to review your transition timings like in a movie editor
- New image upload boxes with an easier way to load images from external URLs
- Added a LayerSlider entry under the “New” menu on the admin bar
- Added LayerSlider helper for page and post editor to include sliders easily
- Using cleaner language across the plugin and docs
- New sample sliders included
-
Improvements
- Slides and layers can now animating at the same time
- Layers can now fade + slide at the same time
- Super smooth transitions with the Greensock engine
- Improved some layer transitions like fade, slide (axis-free), scale, etc.
- Improved crossfading slide transition with semi-transparent PNG files
- Smarter preloading images with lazy load
- Considerably cleaner markup
- Ability to override the default slider settings
- Added lots of action and filter hooks
- Uploaded contents are not relying on URLs anymore
- Using nonces to secure your pages
- Brand new docs
-
Fixes
- Fixed the '1px slide transition bug'
- Fixed markup issues such as missing alt attributes in some cases
- Improved saving to avoid some web server related issues
Changes in previous versions
4.6.6
- Fixed the auto-update feature due to WordPress changes.
4.6.5
- Fixed issues related with the new export & import feature.
4.6.4
- Fixed issues that might broke some features on the admin area
- Fixed debug notice on the front-end
4.6.3
- Added update notifications
- Added release channels for updates
- Added news section
- Sliders can be exported individually now
- Improved and more reliable automatic updates
- Interface improvements
4.6.2
- Fixed double quotes in font-family setting field
- Eliminated debug notices
4.6.1
- Added new color picker with alpha transparency support
- Huge performance boost in loading slider editor
- Editor optimizations for fullscreen sliders
- Fixed saving issues with incompatible plugins
- Fixed flashing PNG backgrounds
- New developer documentation to comply to the new Envato WP theme submission requirements
4.6.0
- Added full support for WPML
- Added Screen Options to hide tooltips
- Fixed the jQuery version check issue with 1.10+ releases
- Fixed responsiveness with only one slide in the slider
- Resolved the Isotope and jQuery Transit incompatibility
- Fixed linked layers in older versions of Internet Explorer
- Fixed the 'Video Quality' settings field
- The slider is now skipping transitions if there is no background image to animate
- Added tools for authors & updated developer's documentation
- Lots of minor fixes and other improvements
4.5.5
- Improvement: fixed issues in responsiveness when you resize the browser during a transition
- Improvement: the circle timer now uses a cool hiding animation
- Improvement: the thumbnail navigation now always stays visible no matter what transition you use
- Improvement: Improved HTTPS support with videos
- Bug fix: Fixed the tiled layers with older versions of jQuery
- Bug fix: Fixed the shadow position in some cases
4.5.1
- Fixed the undefined index notices
4.5.0
-
New features
- Added 4 new skins
- Added 41 additional 2D transitions with semi-3D effects
- Extended the Transition Builder with the new 2D transition options
- Added bar and circle timers
- Added scale and rotate options for layers animations
- Option to hide temporarily a layer on the admin interface
- Option to lock temporarily a layer to prevent dragging on the admin interface
-
Improvements
- Major performance improvements
- The new transitions now can animate to the opposite direction depending on the user interaction and the "two way slideshow" feature
- Added color picker to the color and background fields under the style tab of the layers
- Responsiveness now can handle images with custom dimensions
- A full-width slider now will enlarge the background image if needed
- In older versions of Internet Explorer we are now allow fade effects
- Improvements in the LayerSlider Debug Mode
-
Bug fixes
- Fixed the "link the whole slide" issue under older versions of Internet Explorer
- Fixed an issue which resulted the loading indicator to appear during slide changes
- Several fixes with the navigation area
- Several fixes with the old and new transitions
4.1.1
- Fixed the jQuery.noConflict() issue
4.1.0
- Fixed video issues in Firefox
- Fixed an issue that caused slowness in the transition gallery
- Fixed an issue with the "animateFirstLayer" that caused the slideshow to stop
- Fixed an issue with the cbAnimStop if there is only one slide
- Added jQuery version number check
- Fixed an issue that caused the LayerSlider notices to embed each other
- Improved the "Put JS includes to body" option to fix the easing JS errors as well
- Fixed some style settings
- Fixed API documentation
4.0.2
- Fixed an issue that broke some page functionality in some cases
- Fixed the Media Library with the YourLogo feature in the Global Settings
4.0.1
- Improved CSS overrides to prevent the theme applying global CSS style settings on the slider and its elements
- Fixed an issue which caused the slider to freeze if the navigation area was set to hidden
- We are now using wp_remote_post() instead of file_get_contents() in auto-updates to bypass security restrictions of some hosting services
4.0.0
-
New features
- We added new transition feature with more than 170 predefined 3D and 2D transitions
- We are now using hardware acceleration to give you killer performance on mobile devices
- We added Transition Builder, an easy-to-use visual editor to create your own kind of transitions with almost infinite possibilities
- We added a style editor to the layer options, so you can now easily customize the appearance of your layers
- Added auto-updates
- Added a public PHP function to insert sliders from your template files with filtering options
- Added troubleshooting options to workaround common WP theme issues such as jQuery duplicates
- Added an option to specify a custom capability with you can give access to the plugin on your WP admin interface to other users than admins
- Added option to link to whole slide
- Added REL attribute for layers, so you can use a LightBox or other plugins on them which uses this attribute
- Added loading indicator
-
Improvements
- Revised admin user interface with added tooltips, popups, modal dialog boxes, new color picker, better documentation, and other helpful things
- We improved the Preview feature on your admin area, so now it starts faster and give you better performance for seamless animations
- Improved "Animate first layer" feature, it doesn't animate the background now
- We are now support the value "-1" for distance level (formerly known as P. Level) to position your layers exactly out of the frame
- You can add percentage values of the width and height of your layers
- Full jQuery 1.9 compatibility
- Improved various style settings
-
Bug fixes
- Fixed an issue in the data storage which limited the maximum size of the plugin data and might caused data loss in some very rare cases
- Fixed an issue in Firefox when the browser forgets the chosen type for text layers in some cases
- Fixed an issue in theme integration when the plugin tried to load a non-existent image
- Fixed an issue in linked layers with fade effect which resulted the sublayer disappearance
- Fixed an issue on mobile devices regarding the thumbnail images touch detection
- Fixed an issue in the LayerSlider API when the "data" object wasn't passed for some callback functions
- Fixed an issue in the cbAnimStop() callback function of the LayerSlider API which contained some invalid values regarding the slides
Where can I find the rest of the documentation?
This documentation only covers the basics you need to know such as installing the plugin and receiving updates. The rest of the documentation is integrated into the WordPress plugin itself with interactive tooltips and the contextual help menus on the top right corner of the admin interface. Since these help menus are contextual it will show you different kind of information on each pages.
If you get stuck...
Before contacting us, please make sure that you:
- read this documentation carefully,
- checked the contextual online help on the LayerSlider WordPress admin page by clicking on
Documentation or Help button in the upper right corner,
- and browsed the FAQ of the item.
If you didn't find answer to your problem, please ask your question on the item discussion page or send us a private message from our Codecanyon profile page (Search for the "Email kreatura" box on the bottom right - in this case we will reply via email). We can answer your support questions only in these ways (please do not send us email directly).
IMPORTANT! For the fast troubleshooting, please send us detailed informations about the issue and make sure that you don't forget to send us your site url where you are using / want to use the item. Please note, that we cannot troubleshoot from screencast videos or screenshots.
Please take some time until we respond (usually in 24 - 48 hours).
Useful pages