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 |
| CodeMirror |
codemirror.net |
A versatile text editor implemented in JavaScript for the browser. |
| Dashicons |
github.com |
The official icon font of the WordPress admin as of 3.8 |
| Google Fonts API |
google.com |
Hundreds of free, open-source fonts optimized for the web hosted by Google. |
| GreenSock |
greensock.com |
The most advanced web animation library to build spectacular transitions. |
| jQuery |
jquery.com |
The most popular JavaScript library for building complex web apps. |
| MiniColors |
labs.abeautifulsite.net |
A Tiny Color Picker. |
| phpQuery |
code.google.com |
A server-side DOM API based on jQuery. |
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.3.2
- Fixed skins on Windows servers
- The skin URL now respects HTTPS sites
- Importing sliders now restores their slug/alias
- Various other small fixes and improvements
Changes in version 5.3.1
- Fixed issues with skins
- Fixed a PHP fatal error on certain installations
Changes in version 5.3.0
- Added new API method 'redraw' to update the slider's layout and contents.
- Fixed Javascript error if a slider doesn't have any slide.
- Fixed several issues related to self-hosted HTML5 video playback.
- Fixed responsive mode of full width sliders when the orientation changes on mobile devices.
- Added LS_Sources class for developers to load skins and demo sliders externally.
- Added Turkish translation thanks to marketplace user thernic.
- The LayerSlider shortcode is now registered globally, thus page builder solutions can pick it up automatically.
- Improved compatibility with CloufFlare's RocketScript.
- Revamped auto-update modal window to fit WP's new design.
- Fixed an issue related to invalid JSON data, which caused various issues on the admin interface in some cases. Most notably it broke adding/removing slides and the WYSIWYG editor.
- Fixed "enter URL" button of slide background.
- Fixed "undefined constant WPLANG" error message that occurred on some installations.
Changes in version 5.2.1
- Added "Latin Extended" to default Google Fonts character sets
- Fixed slider slugs/aliases
- Fixed the transition chooser appearing when hitting the Enter key in text fields
- Fixed broken layer style settings when using double quotes in certain options
- Fixed some dynamic contents not showing up in real-time previews
- Selecting recently used colors in the color picker now properly update the WYSIWYG slider editor
- Other small bug fixes and improvements
What's new in version 5.2.0?
-
New features
- A major interface revamp with flat design
- New transition gallery design with filtering options
- Added option to apply the currently selected transition to other slides
- Added option to set post image as the slide background
- Added option to link the whole slide to post URL
- Added option to easily link layers to post URL under the 'Link' tab
- Added option to easily use post image without placeholders
- Supporting meta post placeholders to print out non-standard post informations (e.g. product details in WooCommerce)
- Supporting all Google Fonts character sets
- Added an option to set the duration of the fade transition when the slider is showing up for the first time on page load
- Added an option to start the slider only if it enters into the viewport
- Added an option to hide the slider on mobile devices
- Added an option to hide the slider under the given value of browser width in pixels
- Added an option to hide the slider over the given value of browser width in pixels
- Recently used colors in the color picker
- Support qTranslate in dynamic post contents
- Support 'random' in shortcode and LS_Sliders PHP class
- Support category-name filter in layerslider() PHP function
- Support for including multiple media sources for self hosted video/audio
- Added new API methods: userInitData, defaultInitData
- Changed API properties: prevLayerIndex, curLayerIndex
-
Improvements
- Quicker and more reliable saving method
- Fixed every known issues with import/export
- Fixed character encoding issues
- The plugin no longer relies on mb_eregi() PHP function
- Fixed missing custom thumbnails when the 'hover' option was selected for the navigation area
- Fixed several issues with full width sliders, including the "jump" when the page loads
- Fixed TinyMCE LayerSlider button under WP 3.9+
- Sliders are no longer remain visible on front-end when they removed instead of deleting
- Fixed an issue that reset the post options after duplicating slides
- Fixed several issues with embedded HTML5 videos
- Fixed an issue which prevented to show embedded video thumbnails on first slide
- Fixed the stuck loading indicator when some images were missing or couldn't be loaded
- Fixed the curLayerIndex API variable
- Security fixes, including a potential directory traversal issue
- Added an updated version of Greensock Animation Engine with performance improvements and bug fixes
- Lots and lots of other fixes and improvements
-
Bug fixes
- Prevent Google and other search engines to index the plugin folder of LayerSlider
- Slide background images now have proper "alt" attribute based on the attachment/post details
- Video layers are ignoring the Show until parameter while playing
- Fixed an issue that caused background flickering in some cases
- The slider won't hang up if an image layer couldn't be loaded
- Reduced package file size by removing unnecessary files and legacy code
- Added some extra CodeMirror instances to edit custom CSS more easily
- Added play icon to the 'noskin' skin
- Fixed broken autoplay feature of HTML5 videos
Changes in version 5.1.2
- Fixed 3D transitions in the latest versions of Chrome
- Improved compatibility with WeatherSlider WP and wpStickies
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
Changes 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
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