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 18 built-in skins, and it has tons of options to entirely customize the appearance and behavior of your sliders at the smallest detail.
The detailed license terms and conditions that govern what you can and cannot do with your purchased products and any supplementary services and materials.
Kreatura is committed to user data protection. This document explains how we collect and manage user information, what your data is used for and how you can access, object or ask removal of your data.
This policy outlines what you can expect in the usual cases when you request a refund. These are based on consumer protection laws and act as a baseline.
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.
A photo editor application that works on mobile and desktop.
Installation
Locate the install file
The main plugin package (that you can download from account.kreaturamedia.com) contains useful assets like the documentation, examples and source files. WordPress, however, expects a very specific install file. In order to provide you both the installable plugin and additional assets, we've bundled them together into one ZIP file. This is the reason why you will need to unpack the downloaded ZIP file first, then use the installable package inside.
You will need to first unpack the ZIP file you've downloaded. The installable file will be inside, it's usually called something like layersliderwp-x.x.x.installable.zip.
Installation through the WP admin interface
Locate the installable file described in the above section.
On your WordPress admin area navigate to Plugins -> Add new, then press the Upload Plugin button on the top of the page.
Choose the installable ZIP file mentioned previously, then hit the Install Now button.
WordPress might ask you to enter your FTP login credentials. Click on Proceed when you've finished.
The plugin is now installed, click on the Activate Plugin button.
A new menu entry called LayerSlider WP should appear on your WordPress admin sidebar.
How-to: Installing LayerSlider on a WordPress site
If you're unsure how to install the plugin, just watch our short tutorial video.
Installation via FTP
Locate the installable ZIP file described at the top of this page, then unpack it.
Open your favorite FTP application and connect to your server. Navigate to the "/wp-content/plugins/" folder.
Copy over the "LayerSlider" folder extracted from the installable ZIP file.
Navigate to the Plugins page on your WordPress admin area and click the Activate button below LayerSlider WP.
A menu entry called LayerSlider WP should appear on your WordPress admin sidebar.
Troubleshooting
Please be aware that you must use the "layersliderwp-x.x.x.installable.zip" file when you try to install the plugin on the WP admin area. The main package that you've downloaded contains a lot of other assets. You must unpack it first, then find the above mentioned file inside for installation.
If you receive a No valid plugins were found error message, you've almost certainly uploaded the wrong ZIP file. Please read the previous point and the installation instructions again.
The Destination folder already exists error message means that you already have another copy of LayerSlider installed and you can't use multiple versions simultaneously. Make sure to deactivate and delete the previous copy or check your theme settings to disable bundled versions (if any) before attempting to install the new release. This will not affect your sliders and settings, they will remain still and be available after you've finished installing the new version.
In some very rare cases, certain server settings (e.g. upload size limit, memory limit) could prevent you to install the plugin from your WordPress admin area. If you're experiencing any issue, please contact your server host and ask them to change the relevant settings. Alternatively, you can also revert to the FTP installation method, so you don't have to wait in the meantime.
If you receive an error message that says "Are you sure you want to do this?", it's most likely the same server configuration issue explained in the previous point. WordPress displays this as a generic type of error message, so there could be other reasons as well.
Your web hosting service provider might offer other methods to install plugins such as web-based FTP clients or 3rd party solutions made explicitly for WordPress. Although these should be fine, it's possible that in some cases they might not work as expected and you will need to revert to one of the conventional methods.
If you're experiencing any issue after installing LayerSlider, please try to temporarily disable other plugins and switch to one of the default WordPress themes to see if it helps. LayerSlider should play along nicely with any plugin/theme you use, but incompatibility issues could occur due to several other reasons.
Activating the plugin
Why activating?
In addition to your purchase, you're entitled to the following exclusive features and services by activating your site with a license key:
Enjoy our priority support services to get help quickly and easily.
Receive 1-Click plugin updates, including early access releases.
Unlock premium features in the plugin providing new and interesting ways to extend the capabilities of your sliders.
Import premium slider templates, which you can use as a starting point for your projects. We're releasing and updating premium content regularly.
I received LayerSlider bundled in my theme
We take plugin development very seriously and we're dedicated to offer the best product we can produce. Even if you're using a non-activated copy, it still has great features with almost unlimited capabilities to be a premium experience. Nevertheless, some additional features and services are only available for our direct buyers who have supported the plugin development by purchasing LayerSlider.
If LayerSlider came bundled in your theme, please keep in mind that it is a bonus item that you essentially received for free. While we are providing a premium experience for everyone, it's important to know that we do not receive any share from theme sales.
Theme bundles is a great way to increase our popularity by offering our unique and useful products to the crowd. However, product development and customer support require a lot of resources thus we can only offer our services to our direct buyers. By offering some exclusive features we're encouraging users to support the development of future versions of LayerSlider.
How do I activate LayerSlider?
You just need to enter your license key received after purchasing LayerSlider into the PRODUCT ACTIVATION section and press the Activate Now button.
Where is my license key?
You can find your license key in the email received upon the purchase. You can also find and manage all your licenses by logging in on account.kreaturamedia.com to manage your account.
Can I activate multiple sites?
You can use LayerSlider on as many sites as your licenses allow. A Regular or Personal license can be used for a single website only. However, by deactivating your installation, you can freely migrate your license to another server/domain if you're moving your site. Your license covers additional development mirrors as well. Development installation are counted differently than live production sites. You can use LayerSlider on 3 additional development installations per site covered by your licenses.
An installation is considered a development environment if the site URL is either:
an IP address;
has no TLD (e.g. localhost, local, etc.)
the TLD or subdomain has a typical name (e.g. dev, test, local, stage, staging, etc.)
is on a whitelist (e.g. *.staging.wpengine.com)
Subdomains and individual sites in a WP Multisite environment are considered different domains/sites and you need to purchase separate licenses for each domain/site where you use LayerSlider. The only exception is when you are not running different sites and purely use subdomains for localization or special landing pages within the same installation.
Why was my activation canceled?
Despite the impression you may have, this banner only shows when your site wasn't actually activated in the first place. What's likely is that you've previously deactivated your site, but it was stuck in an activated state. This message is displayed for the sake of consistency as "stuck" activations could result all sorts of strange symptoms like issues with updating LayerSlider or downloading templates. This is an automated error checking mechanism intended to notify you about changes in the product activation state.
If you received a "LayerSlider product activation was canceled on this site" notification, please review all the potential issues that could cause this:
you've moved your site or your domain name has changed;
you've remotely deactivated your site using our online tools or asked us to do the same on your behalf;
you're using a non-genuine copy of LayerSlider
your purchase have been refunded or the transaction disputed;
If none of the above mentioned reasons can explain your case and you feel it happened mistakenly, please let us know by opening a support ticket or contacting us via our Contact Form, so we can help you uncovering potential issues and restoring product activation.
IMPORTANT: Please make sure that you're using the latest version of LayerSlider and try to re-activate your license with that version. Newer releases always include lots of bug fixes, so you can eliminate potential issues that might be relevant.
How can I transfer licenses or deactivate past sites?
If you still have access for the site
Just click on the deactivate button in the Product Activation box and you are all set. The license key that you've used for that site will be available to activate other installations.
If you no longer have access for the site
We've made an account management utility where you can log in and list all your licenses and sites where you've activated LayerSlider. From there, you will be able to remotely deactivate any site you wish. Please visit: account.kreaturamedia.com
If you cannot access your account or someone else purchased LayerSlider on your behalf
In cases like these, please open a support ticket or contact us via our Contact Form and ask for help in order to restore your account or transfer licenses to another account. Please also provide any proof you can in order to confirm your identity as we handle data security and personal information very seriously.
Limitations on license migration
To fight against piracy and other forms of misuse, our systems are monitoring for suspicious activities. Our ultimate goal is to have a great user experience, thus we've tuned our systems to only flag suspicious activities with a good reason.
In case when our systems detect such activities associated with a license key, LayerSlider might prompt your for an activation approval. This does not mean that your license is no longer valid or you won't be able to use it for future activations. The approval process is mostly automated and a staff member from our Support Team will review your case as soon as possible with high priority.
The usual patterns we're monitoring for include:
Unusually high number of activation attempts within a short time frame;
Consistently reoccurring activation attempts on the same sites
Troubleshooting
You can't use your theme's purchase code / license key in case if you've received LayerSlider bundled in a theme. For more information, please read the Theme bundles section above.
Please double check that you've entered your license key correctly if product activation doesn't accept it. Verify that you haven't accidentally included spaces or other surrounding text and characters.
In some edge cases, servers might be configured in a way that prevents your installation from connecting to our server. Usual symptoms include An unexpected error occurred error messages. It's worth asking your web hosting company about this if you've ruled out other possibilities. Also, check the LayerSlider -> Options -> System Status screen to identify potential issues you might have on your site.
After activation, LayerSlider updates will automatically appear on your site in the same way as any other WordPress update. You can check if there is a new version available on the Plugins or Dashboard -> Updates pages. A notification will also appear on the LayerSlider WP admin pages about new releases.
To access early-access versions, select the beta release channel in the PRODUCT ACTIVATION box.
Updating the plugin manually
Once you've downloaded the most recent version from account.kreaturamedia.com 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. You don't have to worry about losing your work, as keeping LayerSlider backward compatible is one of our top priorities, even for really old releases.
Updating the bundled version in themes
If you've received LayerSlider as a bundled item in your theme, new releases will be provided by the theme author through theme updates, since Auto-Updates won't work without activating your copy of LayerSlider. However, if you choose the purchase a license for LayerSlider, theme bundled versions can also be activated and updated without reinstalling the plugin.
Troubleshooting
Please note, WordPress checks for new updates periodically at certain times and caches the results. Even if there is a new version available, it might not appear immediately after activation.
Our auto-update solution requires product activation and is only available for our direct customers as described in the Updating the plugin section.
If you receive an Update package not available or similar error message during the update process it might a symptom of an interfering 3rd party theme/plugin. We are constantly notifying and working together with various authors whenever we notice such issue. Unfortunately, these issues cannot be fixed from our end and a temporary solution is updating manually or temporarily disabling other plugins and switching to the default WP theme.
Another possibility might be a stuck activation. If you've used our online tools to remotely deactivate a site (or asked us to do the same on your behalf) your site might no longer be activated. The same can be true if your license key has been revoked due to a refund or another reason. In cases like this deactivating your site and then immediately re-activating it can help.
Keeping LayerSlider backwards compatible is one of our top priorities. However, there are times when major updates introduce new features and new settings, which depending on their defaults might alter your sliders a bit. If you experience any unwanted change, it's always a good idea to check the settings of your sliders, there are probably new options to control these changes.
Managing sliders
Action
Description
Add a new slider
Press the Add New Slider button located on the top of the LayerSlider admin page. The plugin should navigate to the slider builder interface after you've entered the name of your new slider.
Duplicating sliders
Hover over your slider and click on the icon to reveal slider actions, then select the Duplicate option. This will create an identical copy of the corresponding slider. This feature is useful if you would like to experiment on a slider without changing the original. You can also use this feature to have a base when you want to build a slider with similar settings.
Removing sliders
Hover over your slider and click on the icon to reveal slider actions, then select the Remove option. This will only hide the slider from all pages, but a copy in your database will be preserved as a backup.
Restoring sliders
You can list removed sliders with the filters on top of the page. Click on the restore icon () to reinstate your sliders.
Permanently delete sliders
Having hidden backups from previously removed sliders can always be useful. This will not affect your site's performance, thus we don't recommend to permanently delete sliders. However, if you decide to do that, just select the sliders and choose the Delete permanently option in the drop-down list below your sliders.
Merging sliders
If you have slides in different sliders that you would like to use together, you can merge them. Just select the appropriate sliders and choose the Merge sliders as new option from the drop-down list below.
Number of sliders per page
You can find this setting under the Screen Options menu located on the top of the page.
Slider Groups
Since LayerSlider 6.9.0, you can group sliders. This feature allows you to basically have folders for your sliders. You can create custom groups by dragging a slider and dropping it on another. There's also a new bulk action to group selected sliders together in a single step. You can remove sliders from a group with the same principle: just start dragging a slider, and drop it on the remove tile.
When you import multiple sliders, either with a ZIP file or by downloading slider packs from the Template Store, they will be automatically grouped together. The Clear & Remove Group button allows you to immediately break up the grouping and have all sliders moved outside of the group. This won't touch your sliders and they will remain available on the main grid.
This feature only works in the Grid View at the moment. The list view displays sliders without grouping and you won't notice anything different, even if some sliders are in a group.
Importing slider templates
Press the Templates Store button located before your list of sliders, to reveal the template store screen.
Importing templates will allow you to see our settings and get familiar with the plugin. You can find both simple and complex sliders to discover LayerSlider's capabilities. You can freely experiment on these sliders without worrying since you can always import a new, untouched copy.
Premium slider templates are particularly useful as a starting point for your future projects. We're releasing and updating premium templates regularly. Our goal is to cover most use cases, whether you need a slider for personal use (such as slideshow for family photos), or you want to use it on your business website, or even on billboards. Our selection includes great examples for retail shops as well as templates for creative work.
Troubleshooting
Check the LayerSlider -> Options -> System Status screen to identify potential issues you might have on your site.
Importing our demo sliders requires the PHP ZipArchive extension installed on your server. To see the availability of this extension, please navigate to LayerSlider -> Options -> System Status. Please contact your web hosting service provider if it's unavailable.
Importing a slider will add its images to your WP Media Library. Larger sliders might have a file size that exceeds the upload limit set on your server. To increase the maximum file size of an upload, please contact your web hosting company.
Larger sliders with many images could also consume considerably more memory during the import. Most servers should not have any issue with larger sliders, but in some cases you might experience unexpected issues like partially imported sliders.
If you're experiencing any issue with importing, it's probably linked to memory or execution time limitation on your server. To fix these issues, please contact your web hosting company, since they usually don't offer a way to change these settings remotely.
Import / Export sliders
Importing sliders
At the top of the LayerSlider home screen press the Import Sliders button. This will open a modal window where you can choose a previously exported .zip or .json file to be imported by pressing the Import button. For additional information, please read the details in the modal window.
Exporting sliders
Hover over your slider and click on the icon to reveal slider actions, then select the Export option. This will download a .zip file that you can upload on other sites or use as a backup.
You can also export multiple sliders by selecting them with the checkbox when hovering over them, then choose the Export Bulk Action option below the slider list. Please note, selecting multiple sliders with images can drastically increase the exported file size and could lead import issues on sites with certain server settings.
Troubleshooting
Check the LayerSlider -> Options -> System Status screen to identify potential issues you might have on your site.
Importing sliders requires the PHP ZipArchive extension installed on your server. To see the availability of this extension, please navigate to LayerSlider -> Options -> System Status. Please contact your web hosting service provider if it's unavailable.
Importing a slider will add its images to your WP Media Library. Larger sliders might have a file size that exceeds the upload limit set on your server. To increase the maximum file size of an upload, please contact your web hosting company.
Larger sliders with many images could also consume considerably more memory during the import. Most servers should not have any issue with larger sliders, but in some cases you might experience unexpected issues like partially imported sliders.
If you're experiencing any issue with importing, it's probably linked to memory or execution time limitation on your server. To fix these issues, please contact your web hosting company, since they usually don't offer a way to change these settings remotely.
Using Google Fonts
LayerSlider can load custom fonts hosted by Google on fonts.google.com. Select LayerSlider -> Options from your WordPress admin sidebar, then choose the Google Fonts tab to find the corresponding section. Custom fonts loaded with the editor will be automatically added to the pre-defined fonts you can choose from in the Slider Builder.
Character set support
By default, LayerSlider uses Latin characters for added Google Fonts. However, it supports Cyrillic, Devanagari, Greek, Khmer and Vietnamese scripts as well.
Themes with Google Fonts support
Many WordPress themes support Google Fonts. However, it's common that they only load them on the front-end pages and they will appear incorrectly when you would build a slider on the admin interface. To workaround this issue just add them in LayerSlider and check the "Load only on admin interface" option. This way you can avoid loading the same font multiple times on the front-end pages.
Permission settings
Select LayerSlider -> Options from your WordPress admin sidebar to locate the permissions settings. From there you can easily select any user role. Members of the selected role will have permission to change plugin settings and manage your sliders. By selecting the option Custom and entering a capability you can target users more accurately. For more information about WordPress capabilities, please read the Codex page.
About the Advanced Settings section
Navigate to LayerSlider -> Options from your WordPress admin sidebar, then select the Advanced tab. You can find many troubleshooting options to workaround common issues you might experience on your site.
Please note, these settings can break your site when used incorrectly, and we don't recommend changing the defaults. These settings might help solving issues caused by 3rd party items, but you should only use them when it's necessary.
System Status
Select LayerSlider -> Options from your WordPress admin sidebar, then click on the System Status button. System Status is intended to help you identifying possible issues and to display relevant debug information about your site. It also provides tools to list every server settings, easily set up a debug account or to erase all plugin data. To find out more about using System Status, please follow the on-screen instructions when navigating to its page on the admin interface.
Getting started with the slider builder
Since LayerSlider allows you building professional grade animated material, its slider builder interface can be a bit overwhelming at first. There are many options to control every aspect of your content. This is why it is important to take time and try to understand the basics with the following tips:
Read the tooltips: Almost everything on the admin interface reveal further information with tooltips. Just move your mouse cursor over option fields, buttons, and other interface elements, and the exact description of those will appear in a tooltip message.
Use the preview mode: By pressing the Preview button you can see your work in action instantly. Don't be shy to change settings. If you're not sure about how an option works exactly, just change it and observe the differences in the preview mode. When previewing a layer, you can change the content and settings on the fly, and see the changes instantly, without the need to jump in and out of preview every time something changes.
Use slider templates: Discussed under Gettings Started / Importing slider templates, you can see how we built our demo sliders and which settings we used to achieve certain animations. You can find both simple and complex sliders to discover LayerSlider's capabilities. Don't be afraid of making changes on these samples, you can always import a fresh copy at any time. Premium slider templates can also be the starting point of your projects since we're focusing on covering most use cases.
Slider settings
This is the page where LayerSlider navigates you after adding a new slider. On this screen you can set common settings like the size of the slider, and customize its appearance or features in the other sub-sections.
We do not provide an extensive list of settings here since every option has its description displayed on the admin interface. Please review them carefully, so you can customize your slider behavior and appearance in the way you like.
Slide defaults
When you will work with slides and layer, you may notice that some option can inherit values from higher up the hierarchy. Layers can inherit option values from slides, and in the same manner, slides can inherit values from slider-wide global options. This gives you an opportunity to have a master switch to control certain settings. For example, instead of setting the sizing mode for each slide background one by one, you can just leave them on the value inherit, then set only one option in slider settings. We're using the inherit value by default for the options where it makes sense, so you don't have to bother with that. Just keep in mind that you can control some options from a central place.
Advanced settings
The slider settings section contains hidden options which can be displayed separately. The main goal is to remove clutter from the user interface, since these options control overly specific features, or they meant to be used by experienced users. You can display these options with the switch on the upper right corner. See the illustration below.
Adding slides
As mentioned previously, we don't have an extensive list of all the available options in this documentation, since the admin user interface contains all these information and you can access them on the fly. Just hover over an option/button with your mouse cursor, then a tooltip will appear describing the option in question.
Please note, keeping space efficiency in mind we hide some options used less frequently. Just click on the SHOW MORE OPTIONS button, then you can reveal every slide option.
Managing slides
Feature
Description
Naming slides
You can rename a slide by double-clicking on its name in the tab bar. Type the new name, then press or click away to save your changes.
Re-ordering slides
You can drag and re-order a slide by grabbing its tab in the tab bar and move it to the intended location.
Duplicate slides
Click on the Duplicate slide button to make a new copy of the current slide with the exact same settings and layers. This feature is useful if you want to experiment on a copy without affecting your actual work, or if you want to build a similar slide.
Hiding slides
Hiding a slide will exclude it from the actual slider on your front-end pages. This means your visitors cannot see it, but you will still be able to access it in the Slider Builder. This feature is particularly useful when you want to hide half-finished slides or keep older ones without actually deleting them. Please note, at the moment there is no way to make these slides visible on the front-end, even if you would use custom coding.
Removing slides
Select a slide and press on the right side of the corresponding tab.
About slide transitions
LayerSlider offers more than 200 pre-defined 2D/3D slide transitions. By using the Transition Builder it can be easily extended with custom ones for your own needs. Slide transitions will only use the background image of slides since web standards don't offer a way to "capture" all contents within a slider. It's important to keep in mind that layers will not be used for slide transitions, even if they made to look like a background image.
Modern web browsers are required for 3D transitions to work properly. If you select any 3D transition, LayerSlider will prioritize them over 2D ones. The plugin has multiple fall-back levels whenever a visitor's machine is not capable of showing certain transitions. In general, 2D transitions are supported on all major web browsers.
Linking slides
Linking a slide will make its entire surface clickable. You can also link layers to add a button or a smaller control. Based on your settings, layers can be either above or below of the slide link, making it possible to link both.
Click on the insert... button and use the Choose Page or Post option if you want to link a WordPress resource like a page, post or attachment on your site. This way URLs will be generated automatically and point to the right place even if you change permalinks. It's also the way to use localization plugins like WPML where URLs might change according to the selected language.
Smart links
Smart links can control the slideshow, media playback and other aspects of sliders. It's an easy way to trigger certain slider actions when clicking on the linked element. It can be used for something small and trivial like adding a custom "stop" button up to building your navigation area replacement with your own customizations.
Just click into the linking field and you will be presented with a list of available slider actions. There is only one action that might require some explanation: switching slides. You can achieve that by entering a hash tag (#) followed by the slide number that you want to jump to. For example, if you want to jump to the third slide, you need to enter #3 into the linking filed.
Deeplink
A deeplink is a slide alias name, which you can use in your URLs with a hash tag so LayerSlider will start with the corresponding slide when visitors arrive to the page. Example: domain.com/page/#welcome
Use only lowercase alphanumeric values. You can also use this feature to implement slide navigation with links.
Preview area features
The preview area has many hidden features, which can drastically improve your productivity.
Preview area toolbar
Feature
Description
Zoom
Grab the zoom slider to quickly resize the slider to the size you feel right. This feature can be particularly useful when you're working larger sliders on smaller screens.
Auto-fit
Sets the zoom level automatically to make sure the whole slider is visible without scrolling. This feature will not upscale your sliders on larger screens, but you can manually set the zoom level to your own liking.
Align layers
You can quickly position your layer(s) to the center of the slider, or at any side and corner.
Undo/Redo
Want to undo an unwanted/unintentional change? Just press the undo button.
Slide preview
You can preview the whole slider live. It starts with and repeats the current slide, but you can navigate to other slides as well with the arrows.
Layer preview
Continuous live preview of the selected layer. You can change the layer content and settings on the fly, without leaving or restarting the preview session.
Device view
You can control each layer individually whether they show up on a particular device or not. This is useful to build different layouts of the same slider on smaller screens by dynamically hiding and showing up different layers. Click on the device you want to preview.
Hidden features
Feature
Description
Upload images
You can drag and drop images from your desktop to instantly upload them and set their positions where your mouse cursor is.
Multiple selections
You can select multiple layers by pressing and holding down your mouse button, then draw a lasso around the layers you want to select. You can manually add or subtract from the selection by pressing and holding down the Ctrl/Cmd key and clicking on the corresponding layers in the preview area.
Moving layers
Grab the selection and move wherever you like. Naturally, you can move more than one layer at once by using multiple selections. By holding the Ctrl/Cmd key, you can temporarily disable layer snapping.
Resizing layers
Grab one of the resize handles at the corners and sides of your selection to resize one or more layers.
Guides
Press and hold down your mouse button on one of the rulers, then you can drag out a guide line. Layers will snap to guides, use them to position layers in the same line with ease.
Edit text
Select a text layer in the preview, then press enter or double click on it to switch into edit mode. This will allow you to directly type in the layer content there, without the need to leave the preview area.
Overlapping layers
In some cases layers might cover each other in the Preview area and clicking on them will only select the uppermost item. That's why we've added a right-click mouse action, which will present you a list of layers occupying that area. Just choose the desired layer, then the preview will select and bring it into the front.
Keyboard shortcuts
Jump to the Keyboard shortcuts section to see all the available options. As a teaser, you can copy and paste layers, duplicate layers, move layers around with the arrow keys, start and stop the preview, save the slider ... and much more!
Adding Layers
Managing layers
Feature
Description
Naming layers
Making complex slides will require many layers. Naming them as you build your slide can be really useful to quickly navigate between them.
Re-ordering layers
You can drag and re-order layers by grabbing the icon. The exact order is particularly important when you work with overlapping layers since it controls which layer should be on top of the other.
Locking layers
Locking a layer with the icon will disable the drag n' drop functionality in the Preview, securing it from moving around unintentionally.
Hiding layers
Hiding a layer with the icon will make it invisible in the visual editor and on your front-end pages. This is useful when you would like to keep a layer for later use, but prevent it from showing up in the actual sliders.
Layer types
Type
Purpose
Image
Displays an image. You can upload a new image or choose an existing one from your WP Media Library. You can also insert from URL or pull the featured image from posts.
Text
This layer type should be used for most of the textual contents. You can select the role of the layer with the sub-controls. Do not wrap your content within an HTML element, as it is done automatically based on your selection. You should not use any HTML codes in this field, with the exception of <br>, <b>, <strong>, <i>, <u> and other general purpose inline text formatting elements.
HTML
You should choose this type of layer to use custom HTML content or WordPress shortcodes. Please note, the layer contents will be automatically placed in a <div> element, so it's not necessary to insert a wrapper element. For using semantic HTML, you can select multiple element roles under the Text type instead of using HTML unnecessarily.
Video / Audio
This layer type is preserved for multimedia contents. Choose it if you want to embed YouTube, Vimeo or HTML5 video/audio. In older sliders where you put multimedia contents into an HTML layer will continue to work properly. However, to take advantage of the new multimedia settings introduced in LayerSlider 6, you will need to change the layer type.
Dynamic content
Select this type of layer if you want to use contents pulled dynamically from your WP posts and pages. See Using the Slider Builder / Dynamic Layers section for more information.
Device support
It's possible to build multiple layouts for different devices in the same slider by dynamically showing and hiding layers. With the Show this layer on the following devices buttons, you can choose on which devices should the currently selected layer appear.
Icon
Role
Criteria
Shows/hides a layer on desktop computers.
Screen width > 1024px
Shows/hides a layer on tablets.
Screen width >= 768px and <= 1024px
Shows/hides a layer on phones.
Screen with <= 767px
Embedding videos
LayerSlider supports YouTube, Vimeo, and self-hosted HTLM5 video/audio out of the box. We've integrated many features for these solutions such as setting autoplay, preview image, volume and other controls. They will also automatically pause and resume the slideshow while playing.
Just choose the Video / Audio layer type to embed multimedia contents. For YouTube and Vimeo videos you need to paste the embed code from their website into the text field. Otherwise, click on the Add Media button to add self-hosted HTML5 video or audio.
To use HTML5 self-hosted video/audio, please make sure you're using supported media formats described here. We recommend using MP3 or AAC in MP4 for audio, and VP8+Vorbis in WebM or H.264+MP3/AAC in MP4 for video. The supported formats may vary between browsers, but you can also provide multiple formats if needed by holding down the Ctrl/Cmd key and selecting multiple items from your WordPress Media Library.
At the moment we do not support other media players out of the box since those solutions have their own distinct APIs to control media playback. However, users with web development experience can use the LayerSlider API to detect slider events and run custom code to control 3rd party media players.
Using WP shortcodes and interactive content
Make sure you add WP shortcodes or other interactive content (such as Google Maps embeds, custom scripts, etc) to an HTML layer. Shortcodes will only be rendered on front-end pages, so don't be afraid if the slider builder interface doesn't show the result you would expect.
Using interactive content highly relying on Javascript can be problematic, and might not work properly. Since we cannot workaround every possible issue in someone else's code, it's possible that some shortcodes and embed will be broken.
It also worth mentioning that in responsive mode LayerSlider only scales the layer element itself to gain extra performance. The content inside should adapt the dimension changes on its own. While this happens automatically in most cases, shortcodes and complex HTML might not be resized in sync with the slider.
Layer transitions
This is where you can build your layer transitions. This section can be daunting at first since LayerSlider offers many options to customize every aspect of your work. However, everyone can learn it quickly and easily by following the tips already mentioned previously:
Read the tooltips:
Almost everything on the admin interface reveal further information with tooltips. Just move your mouse cursor over option fields, buttons, and other interface elements, and the exact description of those will appear in a tooltip message.
Use the preview mode:
By pressing the Preview button you can see your work in action instantly. Don't be shy to change settings. If you're not sure about how an option works exactly, just change it and observe the differences in the preview mode. When previewing a layer, you can change the content and settings on the fly, and see the changes instantly, without the need to jump in and out of preview every time something changes.
Use slider templates:
Discussed under Getting Started / Importing slider templates, you can see how we built our demo sliders and which settings we used to achieve certain animations. You can find both simple and complex sliders to discover LayerSlider's capabilities. Don't be afraid of making changes on these samples, you can always import a fresh copy at any time. Premium slider templates can also be the starting point of your projects since we're focusing on covering most use cases.
There are multiple types of animation, you can view one at the time by clicking on its title or icon. In each section, you can find the description of what it does and when it will be used. For clarity, we've made animated illustrations that you can see by hovering over the icons. The green highlight shows which transition types are being used by the layer, while the scaled (larger) icon shows the currently opened transition section.
Linking layers
You can link a layer under its Link & Attributes tab. Enter a URL and set whether you want to open it on the current page or in a new tab/window.
Click on the Choose Page or Post button if you want to link a WordPress resource like a page, post or attachment on your site. This way URLs will be generated automatically and point to the right place even if you change permalinks. It's also the way to use localization plugins like WPML where URLs might change according to the selected language
Smart links
Smart links can control the slideshow, media playback and other aspects of sliders. It's an easy way to trigger certain slider actions when clicking on the linked element. It can be used for something small and trivial like adding a custom "stop" button up to building your navigation area replacement with your own customizations.
Just click into the linking field and you will be presented with a list of available slider actions. There is only one action that might require some explanation: switching slides. You can achieve that by entering a hash tag (#) followed by the slide number that you want to jump to. For example, if you want to jump to the third slide, you need to enter #3 into the linking filed.
Layer attributes
You can also apply commonly used attributes (such as a unique ID or classes) on layers in the same section. These settings are made for users with web development experience who want to use custom coding to achieve a customization level that a visual editor cannot provide.
Apart from the pre-defined list of attributes, it's also possible to add your own. In the custom attributes section, you can enter any attribute name, including pre-defined ones to override them. Many 3rd party plugin uses custom attributes, this section is important if for example you would like to set up a FancyBox image gallery on LayerSlider layers.
Layer Styles
Under the Styles tab of your layers, you can find commonly used formatting options to customize their appearance. We highly recommend using these settings whenever it's possible, instead of adding unnecessary HTML code to the contents of layers.
This is where you can also set the position of layers with the Left and Top options. While you can use the visual editor to move layers around, it's often better to fine-tune them here for a pixel-perfect result.
Image editor
With the help of Adobe's Creative SDK, LayerSlider 6 now has a built-in image editor. You can perform common tasks like resizing, cropping, rotating images, as well as photo retouching, adding frames, text, effects, stickers and a lot more. It's like a mini-Photoshop.
Look for the icon on the upper left corner of any image picker button to launch the editor with the currently selected image.
Popout editor
One of the main design goals with LayerSlider 6 was the ability to work right in the preview area, without having to scroll up and down constantly to change settings. In addition to keyboard shortcuts, we've also added a Pop out editor button, which will transform layer options into a floating window that can be resized and placed wherever you want. This makes it extremely easy to edit everything in one place.
Timeline
The timeline feature can be used to review all layer transitions occurring on the slide at once. The color-coded markers clearly show when and what happens. You can even grab the playhead and move it back and forth to play segments at your own pace.
Dynamic layers from posts
You can pull individual post information by using post placeholders. These are working very similarly to WordPress shortcodes. You can enter one or more placeholder into the layer's content area, then LayerSlider will automatically replace them with the appropriate content from posts. You can even mix them with static content. Example:
This post was written by [author] on [date-published] will be
This post was written by admin on March 13, 2015
Using post filters
By using the post filters you can target certain WP posts or pages to pull information from. LayerSlider supports custom post types, tags, categories, and taxonimies to find literally any kind of custom content that themes and plugins may use. To set filters you just need select a dynamic layer and click on the Configure post options button. In the opened modal dialog window you can also order the results in your preferred way.
Get the items from results to work with
The post filters are global across slides, but you can select items from the results independently. This allows you to work with posts in a custom order, for example, you can retrieve only the even/odd posts from the results. If you want to follow the original order you can choose the option following, then LayerSlider will get them automatically.
Using mixed content
You are not forced to build sliders with dynamic contents only. You can mix them with static slides and layers.
Using custom post fields
You can use the [meta:fieldname] post placeholder to pull content from custom fields. Please make sure to replace the fieldname part with the actual field you want to pull information from.
Frequently Asked Questions
Q: Can I use static and dynamic contents at once?
A: Sure, you can mix them freely. Just make sure to select the Dynamic content from posts layer type.
Q: Can I set custom [excerpt] for posts?
A: Yes, just enable the excerpt field under Screen Options when you're editing a post/page, then enter the desired content.
Q: How excerpts are generated?
Manually entered excerpts will remain "as is", without any modification or formatting. Custom HTML code is allowed.
Auto-generated excerpts have all shortcodes and HTML tags removed and they will appear as plain text.
Auto-generated excerpts will be trimmed down to 55 words. The [...] "hellip" sign will be appended at the end if the text exceeds this limitation.
Custom word count used by themes will be automatically applied in your sliders. Developers can override it by using filter hooks.
Auto-generated excerpts respect WP's <!--more--> tag, so you can easily split your content at the point you want.
Q: Can I work with fixed posts?
A: No, the purpose of dynamic sliders is to automatically update their contents when you add a blog post or any other content on your site.
However, there is a simple workaround with a similar result. You can find specific posts with unique properties (e.g. custom tag) just by setting the right filters in the Post Options section of dynamic layers. The results will not update as long as you don't add more posts that match to the selected filters.
Q: Can I use content from multiple posts on the same slide?
A: At the moment you can't. This feature is yet to be added in a later update.
Q: Can I pull content made by WooCommerce or other plugins?
A: Yes, see the "Using custom post fields" part.
Q: Can I pull content from custom post fields?
A: Yes, see the previous point.
Multilingual sliders
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 your work is 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.
Creating multilingual sliders with qTranslate
qTranslate (and its successor, qTranslate X) is the one of the easiest way to create multilingual sliders in LayerSlider. It is a free and simple plugin that supports a shortcode-like syntax to enter text in multiple languages, so it can display the proper one for your visitors. LayerSlider supports shortcodes and other special syntaxes within the contents of layers, so you can enter something like this to create a multilingual slider:
[:en]English text[:de]German text
The line above will output "English text" if the visitor selected English page and "German text" if the visitor selected German. You can read more about qTranslate on its WP.org plugin page.
Don't forget to disable the "Use slider markup caching" option under the LayerSlider -> Options -> Advanced tab. Due to technical difficulties, it's not possible to dynamically show up multilingual content in a cached copy. Your sliders could always show the same language string if you keep caching enabled.
Translating with the WPML plugin
You need the "Multilingual CMS" version of WPML with installed WPML String Translation add-on.
Translating the plugin's user interface:
Navigate to WPML -> Theme and plugins localization
Make sure that the "Translate the theme and plugins using WPML's String Translation and load .mo files as backup" option is selected in the "Select how to translate strings in the theme and plugins" section. This should be the default selection in newer versions of WPML.
In the "Strings in the plugins" section select LayerSlider and press the "Scan the selected plugins for strings" button below.
Under WPML -> String translation menu item, you can now see and edit the strings that the LayerSlider UI uses. This list might be cluttered with other translatable strings, so you might want to select the "LayerSlider" option in the "Domains" dropdown list.
Creating multilingual sliders:
LayerSlider registers translatable strings when you save your work. If you want to translate a previously created slider, you need to re-save it first, even if you don't change anything. Once LayerSlider registered the translatable items, they will appear under the WPML -> String translation menu item in your WP admin sidebar.
You can quickly filter the translatable items to your slider contents by selecting the "LayerSlider Sliders" (or "LayerSlider WP" if you're using an older version) option from the "Domain" dropdown list.
After translating a string and marking it as complete, they will automatically appear in your front-end sliders. Whenever you make a change in your sliders, the affected strings will be marked as "Translation needs update" in WPML's String Translation module.
The WPLM team was kind enough to provide an official step-by-step guide of translating LayerSlider sliders. It explains and illustrates every step of the way in detail. Click here to read their guide.
Don't forget to disable the "Use slider markup caching" option under the LayerSlider -> Options -> Advanced tab. Due to technical difficulties, it's not possible to dynamically show up multilingual content in a cached copy. Your sliders could always show the same language string if you keep caching enabled.
Keyboard shortcuts
Keyboard shortcuts may not work when you're interacting with form elements, since many keys have special meaning while typing into a text field. To avoid any issue, some shortcuts are disabled until the form element loses its focused status (i.e. the glowing ring around it). To overcome this inconvenience simply press . This will unfocus the form item you're working with and re-enable all keyboard shortcuts.
General interface shortcuts
Shortcut
Description
in text fields
Lose focus on current form item to make all keyboard shortcuts accessible.
on selected layer
Toggles editing mode on the selected layer, so you can change the layer text in the preview area.
+
Undo. Erases the last change done to the slide revering it to an older state.
+
or
+ +
Redo. Reverses the undo or advances the buffer to a more current state.
+
Save the slider.
Slide actions
Shortcut
Description
Toggle slide preview mode to see your work in action.
( /
) +
Toggle layer preview mode to see only the selected layer(s) animating.
Managing layers
Shortcut
Description
+
Copy selected layer(s), so you can paste them on different slides or move across sliders. Please note: to avoid conflicts with the OS native copy event, this action will only work when there's no active text selection on the page.
+
Copy and remove selected layer(s) in a single step.
+
Paste previously copied layer(s).
+
Duplicate selected layer(s).
Remove selected layer(s).
Positioning layers
Shortcut
Description
Move layers in any direction by a pixel on the slide canvas.
( /
) +
Move layers in any direction by 10 pixels on the slide canvas.
Holdwhile dragging layers
Move layers along their vertical or horizontal axis.
Holdwhile dragging layers
Disable the "snapTo" feature to freely move around layers.
Slider revisions
LayerSlider 6.3.0 introduced a new premium feature: Revisions. Have a peace of mind knowing that your slider edits are always safe and you can revert back unwanted changes or faulty saves at any time. This feature serves not just as a backup solution, but a complete version control system where you can visually compare the changes you have made along the way.
Reverting a slider to an earlier version adds another snapshot to Revisions, which can also be reverted if you change your mind and would rather return to the original copy. Slider Revisions also saves the undo/redo controls. Even if there is no perfect snapshot, you will be able to undo the changes in-between to find what you are looking for.
Method 1: Using shortcodes
Shortcodes are special placeholders, which you can paste into the WordPress text editor when editing posts and pages. They will be automatically replaced with the appropriate content on your front-end pages. Shortcodes are one of the most commonly used methods of inserting contents to your site. A lot of other solutions (e.g. page builders in themes) can also accept LayerSlider shortcodes to add sliders to your pages.
Each slider has a unique shortcode. You can hover over a slider in your list and click on the icon to reveal slider actions, then select the Embed option to see its shortcode. You can also find the shortcode of a slider at the bottom of the Slider Builder page next to the save button.
For advanced customization, you can add a filters attribute to your shortcode to control on which pages the slider should appear. Read the Using filters section to learn more. Example shortcode: [layerslider id="1" filters="homepage"]
There is also a way to override the "Starting slide" option with the shortcode. Using the firstslide shortcode parameter you can force embeded sliders to start with the specified slide, even if the slider has different settings. This is particularly useful when you want to embed the same slider in multiple times showing different slides. In the following example we're forcing the slider to start with the second slide: [layerslider id="1" firstslide="2"]
You can override most slider settings. Please read the Overriding settings section for more information.
Editor helper utility
We've also added a small utility to the WordPress text editor toolbar. It will pop up a modal window with your most recent sliders to choose from. After selecting the sliders and changing the embed options as desired, press the "Insert into post" button to put the corresponding shortcodes into the editor. See the illustrations below.
Method 2: Gutenberg block
Latest WordPress releases are shipped with their new page editor called Gutenberg. It's aimed to be an alternative for popular page builder solutions and offers WYSIWYG visual editing.
LayerSlider now includes a dedicated Gutenberg block, which you can use to easily insert sliders into posts and pages. If you aren't familiar with Gutenberg yet, here's a quick tutorial:
Click the + sign, then select the LayerSlider block from the Widgets category. You can also use the search feature to quickly find any block.
The LayerSlider block is now automatically added to your post / page. You can select the block and move it around with the handle on the left side.
At this point the block is only a placeholder showing where the slider would be displayed. Click on the Slider Library button and select the slider you want to insert into your post / page.
That's it! You can now press the editor Publish / Update button to save your changes and the slider will be at the right place on your front-end pages.
Additional details:
To change the slider, you just need to select the LayerSlider block, then click on the pencil toolbar button located above the block.
You can customize your LayerSlider block with extra options available at the right sidebar. If the sidebar isn't visible, just press the cog icon at the top right corner of the editor page.
Here's a quick video showing Gutenberg and the LayerSlider block in action:
How-to: Using the LayerSlider Gutenberg block
This video helps you get started using the new Gutenberg editor with the LayerSlider block.
Method 3: Using the LayerSlider widget
LayerSlider supports widgets, so you can add sliders to your front-end pages just by a drag n' drop. To do that, navigate to the Appearance menu on your left sidebar and select "Widgets". Grab the LayerSlider WP widget and drop it into one of your widget areas.
Please note that some themes may not support a widget area that you're looking for. In this case, you can create a new widget area by editing your theme files. Here is the official documentation about widgetizing your theme. However, this requires web development knowledge and we don't recommend for users without experience.
For advanced customization, you can enter custom filters in your widget settings to control on which pages the slider should appear. Read the Using filters section to learn more.
By entering a custom value into the "Override starting slide" option field, you can force embeded sliders to start with the specified slide, even if the slider has different settings. This is particularly useful when you want to embed the same slider in multiple times showing different slides.
Method 4: Page Builders, Visual Composer
Most page builders in themes support embedding LayerSlider sliders out of the box. Whether you're using a custom solution or a popular plugin like Visual Composer, there is likely a way to use them with LayerSlider.
Either there is a dedicated module/block/widget for LayerSlider, or you can insert shortcodes in the same manner described in the first method.
If you experience any issue, please review the available options your page builder offers. Since each solution differs in design and behavior, there is no universal guide to them. You can also consider just using more conventional methods like shortcodes and widgets described in method 1 and 2 respectively.
Method 5: PHP function
Because a slider can be an integral part of your site, you may want to insert it dynamically from the template files. There is a PHP function (with additional filtering options) to do just that. For example, you can call it from the header.php file of your theme and it will insert your slider into the corresponding area. By providing filters you can show it on certain pages only depending on your settings. Here is the function definition:
The $sliderID parameter can be found in the list of your sliders on the LayerSlider admin area. See the first table column.
$filters is an optional filter list. Read the Using filters section to learn more.
$overrides is an array of slider settings to be applied to the inserted slider. Check the Overriding settings section to learn more.
The following examples are all valid:
<?php layerslider(1); ?> // Displays the first slider on every page
<?php layerslider(1, 'homepage'); ?> // Displays the first slider only on your home page
<?php layerslider(1, 'my-custom-post-title'); ?> // Displays the first slider on a custom page by name
<?php layerslider(2, '1369'); ?> // Displays the second slider on a custom page by ID
<?php layerslider('homefullwidth', 'category-name'); ?> // Displays the slider with the slug 'homefullwidth' on ali/custom page by a category name
<?php layerslider(3, 'homepage,about-us,1234'); ?> // Displays the third slider on multiple pages
It is important to check the corresponding slider ID on the LayerSlider WP slider list page. When you remove some sliders, their IDs won't be re-indexed and the sequence you would expect may broke up. This is important for data consistency.
Using filters to display sliders on specific pages
Filters can be used to target specific pages where you want a slider to be displayed. This can be extremely helpful if you're inserting sliders in a way that would show them on multiple pages. By using filters you can set custom conditions that would otherwise require programming skills. Our solution is easy to use for anyone and the currently supported filters should cover most use cases.
Front Page: The special name homepage can be used to display the slider on your site's main page.
Page ID: Use a page ID to display sliders on a specific page. You can find the page ID in the URL (post=<number>) when you're editing a page/post on the WP admin area.
Page Slug: A page slug can also achieve the same purpose as page IDs. The page slug is the editable part of the permalink, which you can see when editing a page/post on the admin interface.
Category: You can also filter for category pages. Providing a category name will display the slider on all pages belonging to that category.
Important: You can set multiple filters. Just provide a comma separated list if you want to display sliders on multiple pages. Mixing the different kinds of filters together or providing multiple IDs/slugs/category names is not a problem.
Example: The filter list homepage,about-us,1234 can be split into three different filters:
homepage – your site's main/front page
about-us – a page slug (permalink)
1234 – a page ID if you don't use pretty URLs
Overriding slider settings
Version 6.8.0 and above allows you to override slider settings via the shortcode and the layerslider() PHP function. This can be useful if you want to make small changes in certain situations without duplicating the slider. For example, you might want to change the slider skin on some pages to fit better to a different page style. This can be achieved like so:
You can tell the exact option names by inspecting the name attribute of the slider settings input fields. This might require some web development experience.
Publishing Popups
About Popups
LayerSlider is a well established product with many years of experience behind it. Combining our strong foundation and the vast number of features we already have with the newly introduced Popup plugin makes LayerSlider one of the best choice among popup plugins. All the features you would use in sliders are also available in Popups as well. This includes our feature rich image & content editor, multilingual popups, dynamic content from WP posts, and of course LayerSlider's animation capabilities.
In addition, the LayerSlider Popup plugin comes with a variety of new options to fine tune the appearance and control when and how to display popups. Greet new visitors on your site with a beautifully designed animated banner with newsletter subscription or other offers. Display a message when they become idle. Show them recommended content before leaving the page or when they finished reading an article. There are a lot of possibilities and all of LayerSlider's content creation and animation capabilities are at your service to make popups that stand out from the crowd.
Popups can be embedded to your pages in the same way as traditional sliders. Any of the method described in Publishing Sliders will work. We're also providing a new method to fine tune how and when to display a Popup. See the next section to learn how to use the auto include feature.
Using the auto include feature
Given the nature of Popups, you will likely want to include it on multiple pages with fine tuning when and to whom it should appear. Although conventional methods of including sliders will work the same, you will probably want to use the auto include feature dedicated specifically to Popups.
The features described below will only with the auto-include method. If you use other methods such as shortcodes, widgets, page builders or PHP functions the Popup will always appear.
Choose your target pages:In the Target Pages section you will be presented some pre-defined option to choose on which pages a Popup should appear. By turning the All pages switch off, more options will become available to choose where to include your Popup. By entering a comma separated list of page IDs, titles or slugs into the Include custom pages text field you can add individual pages. There is also an option to exclude pages in the same manner.
Choose your target audience:Select the roles and user groups to whom you want to display the Popup. You have the option to show your work only for registered or unregistered users, or even to first time visitors for example.
Set up a repeat:Disable the Repeat Popup option if you would like to show a Popup only once to a vistor. Enable the Repeat Popup option and leave the Repeat after # days option empty if you want to display the Popup on each page load. Alternatively, you can enter a value from 0 to 365 to repeat after the specified number of days has passed.
Fine tune your work:Don't forget to check out the Launch Popup section to set up triggers to control when the Popup should become visible. You can also fine tune the appearance of other aspects of your Popup with the other settings we didn't mention here.
Extras
As mentioned in the Linking layers sections, the #closepopup Smart Link can be very helpful if you want to design your own close button with unique appearance and transitions. This option also available when linking the entire surface of slides.
Alternatively, you can apply the ls-close-popup-button class name to any element within the slider to achieve the same goal.
If you have multiple Popups on the same page, you might want a single button to close them all. In a case like that just apply the ls-close-all-popups-button class name on any element on the page.
Troubleshooting
My Popup doesn't show up:Review the Launch Popup section and verify that you've set a trigger. Also check out the Repeat Control options. You might already saw the Popup previously and there isn't a proper repeat set up. Make sure that the Popup should be visible to you and on the page where you test it based on the Target Pages & Target Audience settings.
Furthermore, see if you've selected the Popup option under Slider Settings -> Layout. Popup is a premium feature, it also requires product activation if you haven't done it already.
My Popup show up as a regular slider:Make sure that you've selected the Popup option under Slider Settings -> Layout. Without that, your work will appear as regular sliders or not at all.
Can I use the same slider both as a Popup and regular slider?No. Popups have different layout options that would make it really impractical. However, you can duplicate the slider slider and use slightly different settings if you are looking into a workaround.
How can I use forms, email subscriptions, etc. in Popups?Currently, LayerSlider does not offer form building or email subscription features. However, you can use 3rd party solutions for these kind of purposes. LayerSlider is shortcode aware, just create an HTML layer and paste the shortcode of any 3rd party plugin of your choosing. This enables you to combine and use the best of both worlds without compromising.
Do you track impressions and other statistics?We're planning to introduce features like this in future updates. Until then you can embed custom HTML and WordPress shortcodes, so there shouldn't be an obstacle to use 3rd party solutions of your choosing.
Third-Party Integration Guides
Using FancyBox in sliders
FancyBox and other Lightbox-like plugins in general can be used to display almost any type of content in a modal window. Images, galleries, videos, other websites, pdfs, you name it. In our example we're demonstrating how to embed Google Maps, but you can use the same method to add other embeddable web services as well.
Setting up a Google Maps modal
First, you need to install a FancyBox WordPress plugin. In our guide we used Easy FancyBox.
Make sure to review the Easy FancyBox plugin settings and enable to load videos and iframes.
After setting up FancyBox, jump back to LayerSlider and select a layer in the editor that you want to use with FancyBox.
Under the Link & Attributes tab, enter the URL you want to display with Fancybox, then enter the fancybox-iframe into the class field in the custom attributes section.
That's it, FancyBox should now appear when you click on the layer on your front-end pages.
Other use cases
Of course, FancyBox offers a lot more. You can also make image galleries or embed YouTube videos for example. All of these can be done by applying the appropriate class name and other special attributes described in the Easy Fancybox documentation.
For example, To group multiple layers into one gallery, enter the same rel name on all layers. It can be a custom identifier of your choosing. For example: flowers-gallery.
Troubleshooting
If you experience any issue, please verify that you've installed and activated the Easy FancyBox plugin, and you've reviewed all of its settings to allow the functionally you're seeking. For example, if you want to embed web contents, you need to allow iframes.
More guides are coming soon
Based on requests and popular demand, we will continue to include more and more integration guides to use LayerSlider with your favorites.
Using the Transition Builder
LayerSlider WP supports various types of slide transitions. The Transition Builder offers you an easy-to-use visual editor to create custom transitions for your own needs. Transitions created with the editor will automatically appear in the list of available transitions when you're editing a slider.
Tips & tricks
We can recommend the same tips as we mentioned in the Slider Builder section:
Hover over an option field with your mouse cursor to reveal more information.
Watch the preview. The best way to learn is to instantly see how each option affect the transition you're building. Just play with the settings and observe the differences to understand their role.
We have sample transitions, too! They should be already added to the Transition Builder when you first visit the page. You can see the settings we've used to build these samples. You can also import any of the 200+ pre-defined 2D/3D transitions we're using in the plugin.
Building 3D transitions
3D transitions are made up with 3 animation steps to create more complex transitions with multiple actions. The "animation" step is required, but the "before animation" and "after animation" steps are optional. You can use them to do some preparation before the animation starts or restore back some settings after it is finished.
To help you better understand what are these steps, here is a simple example:
Before the animation starts, you may want to scale down columns
Then rotate them to left
Finally, you want them to scale up back
If you want a really simple transition, you don't have to use all the steps. In this case, please make sure to untick the "Enabled" checkboxes for the corresponding steps.
About LayerSlider WP Skin Editor
The LayerSlider WP skin editor offers you a graphical way on your WP admin area to modify LayerSlider skins without the need to work with files on FTP. The Skin Editor automatically detects additional content, so you can customize skins from other sources as well.
Editing a skin requires some basic CSS knowledge, please do not attempt to modify a skin if you aren't familiar with CSS. Malformed or invalid CSS code can break your slider appearance.
Please note, updating the plugin (including auto-updates) will override the plugin folder along with your modifications. Consider using the CSS Editor or back-up your modifications before updating.
About LayerSlider WP CSS Editor
With this editor, you can enter custom CSS code, which will be included on pages containing LayerSlider sliders. This gives you a chance for much more complex customizations that the Slider Builder interface cannot provide. Your CSS code will also be included in the Slider Builder, thus the Preview mode should pick them up and show the appropriate result on-the-fly.
Using CSS requires some web development experience. Please do not attempt to use this editor if you're not familiar with CSS. Malformed or invalid CSS code can break the appearance of sliders or your site.
About LayerSlider API
LayerSlider is built on standard web technologies like HTML, CSS, and Javascript, and offers a way to extend the capabilities of the plugin through the LayerSlider API. Please note, this requires programming skills and web development experience, thus we cannot recommend it to users without the necessary knowledge.
LayerSlider 6 introduced a whole new API model with new events and methods. To view the API documentation for older releases, please navigate to the Legacy API section. The legacy API cannot be used in LayerSlider 6, it is documented only to provide you a way of porting (if needed).
Event reference
Event callbacks is a way to receive notifications and run custom code when certain actions occur in sliders. The following events can be used under the Event Callbacks tab of the Slider Builder.
Init Events
Description
sliderWillLoad
Fires as soon as a LayerSlider instance has been created, but before processing any user data or rendering the UI. This gives you a chance to perform any task before LayerSlider tries to parse the markup and user settings. Since this event occurs in mid-initialization, you must bind this event on the target element before calling .layerSlider().
sliderDidLoad
Fires when a LayerSlider instance is fully initialized and its UI elements become accessible for DOM manipulation. You should bind this event on the target element before calling .layerSlider() to avoid timing issues.
Resize Events
Description
sliderWillResize
Fires before resizing and rendering sliders due to a viewport/orientation etc. change. Keep in mind that running slow code in this event can lead to performance issues, as it is called subsequently in multiple times.
sliderDidResize
Fires after sliders have been resized and rendered due to a viewport/orientation etc. change. Keep in mind that running slow code in this event can lead to performance issues, as it is called subsequently in multiple times.
Slideshow Events
Description
slideshowStateDidChange
A changed slideshow state can occur for various reasons, such as starting media playback, hovering over the slider, manually pausing the slideshow, etc. This event fires at any state change. Since there are multiple states, it's not guaranteed that there is an actual change in playing/pausing the slideshow. Slideshow states can be retrieved from the Event Data object passed to the callback handler.
slideshowDidResume
This event fires when the slideshow resumes from a paused state. Please note that slide timers and layer transitions are not bound to the slideshow directly. Depending on the pauseLayers option, the slide's animation timeline can continue its progress towards the end of the slide and wait for slide change until the slideshow resumes from its paused state. You can examine the passed Event Data object to identify which settings is applied.
slideshowDidPause
Fires when the slideshow pauses from a playing state. As mentioned in the previous event, the pauseLayers option decides which (if any) animations can continue playing in the background. The slideshow paused state only guarantees the prevention of changing slides. You can examine the passed Event Data object to identify which settings is applied.
Slide Change Events
Description
slideChangeWillStart
This event signals whenever the slider wants to change slides, and is your last chance to divert or intervene in any way. The proposed slide indexes and other relevant information is in the passed Event Data object.
Return false to prevent slide change, or return an integer to switch to that slide instead of the proposed one.
slideChangeDidStart
This is the last notification before the slider commences a slide change. At this point you can no longer divert or intervene, its only purpose is letting you know the next slide index and other relevant data in advance.
slideChangeWillComplete
Fires before completing the slide change. Since at this point the slide change is still in progress, the current slide's index is still pointing to the previous slide. Please note, layers animation may occur earlier in execution depending on the timeShift option. See the Slide Timeline Events section if you're looking for an event like that.
slideChangeDidComplete
Fires after a slide change has completed and the slide indexes have been updated. Please note, layers animation may occur earlier in execution depending on the timeShift option. See the Slide Timeline Events section if you're looking for an event like that.
Slide Timeline Events
Description
slideTimelineDidCreate
Fires when the current slide's animation timeline (e.g layer transitions on the slide) has been created. This event lets you know when the GSAP timeline object becomes accessible for interfacing.
slideTimelineDidUpdate
Fires rapidly (at each frame) throughout the entire slide while the animation timeline (e.g. your layers on the slide) is playing. This includes reverse playback as well.
slideTimelineDidStart
Fires when the current slide's animation timeline (e.g. your layers) has started. This event signals the exact time in execution when the first (earlier) layer becomes visible and transitions are taking place.
slideTimelineDidComplete
Fires when the current slide's animation timeline has completed (e.g. layer transitions) and the slider is ready to change slides. However, changing slides is not yet guaranteed at this point, as it depends on slideshow states and other factors.
This event only concerns transitions occurring on the slide, thus it is possible to divert the slider or intervene in any way before changing slides. The proposed slide indexes and other relevant information is in the passed Event Data object.
You can return false to prevent a potential slide change.
slideTimelineDidReverseComplete
Fires when all animations on a reversed slide have reached their starting point and the slide is ready to be played from the beginning.
Media Events
Description
mediaDidStart
A media element on the current slide has started playback. Toggling play / pause do not affect this event.
mediaDidStop
A media element on the current slide has stopped playback. Toggling play / pause do not affect this event.
Popup Events
Description
popupWillOpen
Fires when the Popup starts its opening transition and becomes visible.
popupDidOpen
Fires when the Popup completed its opening transition.
popupWillClose
Fires when the Popup stars its closing transition.
popupDidClose
Fires when the Popup completed its closing transition and became hidden.
Destroy Events
Description
sliderDidDestroy
Due to technical reasons, destroying a slider may not happen instantaneously. This event lets you know when the slider destructor has finished and it is safe to remove the slider from DOM after calling the destroy API method.
sliderDidRemove
This event is fired as the last step when destroying a slider and the second parameter true was passed in the destroy API method indicating to remove the slider.
Event Data object
Most event handler functions will have the same 2 pre-defined variables passed. Those are the jQuery Event object and our custom slider data object. You can name these variables by your choice, but we will refer to them as event and slider in our examples.
Every slider data object will contain the same properties, regardless of the used event. However, it's possible that some values are not yet set depending on the current point of execution. The data object contains the most relevant information, but we've also included the entire LayerSlider instance data source, which you can use to access or modify properties on the fly, as well as to add new methods to implement new features.
We encourage everyone to use the browser developer tools and examine the returned data by using console.log() to see potentially undocumented data. Here is an example that you can paste into your browser's JavaScript console. Please make sure to use the right selector when targeting the slider container element on which the LayerSlider instance was created.
var data = jQuery('#slider').layerSlider('eventData');
console.log( data );
Please note, the slider. prefix in every property name refers to the passed variable to callback functions, which can be named differently.
Slider Properties
Type
Value
slider.data
Object
The complete data source object of the current LayerSlider instance. Since this is a reference, you can access and modify any part of the object. You can event add new methods to implement new features this way.
slider.userData
Object
The parsed (e.g. defaults included) slider options which have been set by the user in the init code.
slider.target
DOMNode
The slider container element, on which LayerSlider was initialized.
slider.state
Object
The slider states object, which indicates whether the slider is preloading images, changing or animating slides etc.
slider.isBusy
Boolean
Returns a boolean value indicating whether the slider is busy to complete background tasks (see slider.state).
slider.api()
Function
The shortcut to execute API commands. Example: slider.api('next');
Event Properties
Type
Value
slider.event.target
DOMNode
The affected element from which the event originates. For example, in case of a media event, it might be an HTML <video> element. In most cases it defaults to the slider container.
First (Starting) Slide Properties
Type
Value
slider.slides.first.index
Integer
The index of the first (starting) slide. The count starts from 1 instead of zero.
slider.slides.first.data
Object
Contains slide-related settings as well as custom slide properties set in the Slider Builder or through the data-ls attribute.
slider.slides.first.deeplink
String
Deeplink of the first (starting) slide (if any).
Previous Slide Properties
Type
Value
slider.slides.prev.index
Integer
The index of the previous slide. The count starts from 1 instead of zero. Please note, this value is updated after the slideChangeDidComplete event.
slider.slides.prev.data
Object
Contains slide-related settings of the previous slide as well as custom slide properties set in the Slider Builder or through the data-ls attribute.
slider.slides.prev.deeplink
String
Deeplink of the previous slide (if any).
Current Slide Properties
Type
Value
slider.slides.current.index
Integer
The index of the current slide. The count starts from 1 instead of zero. Please note, this value is updated after the slideChangeDidComplete event.
slider.slides.current.data
Object
Contains slide-related settings of the current slide as well as custom slide properties set in the Slider Builder or through the data-ls attribute.
slider.slides.current.deeplink
String
Deeplink of the current slide (if any).
slider.slides.current.layersIn
jQery Collection
A jQuery collection of DOM nodes, which contains layers appearing on the current slide, including static layers.
slider.slides.current.layersOut
jQuery Collection
A jQuery collection of DOM nodes, which contains layers leaving on the current slide. This includes static layers, since they aren't bound to their origin slide.
slider.slides.current.timeline
GSAP TimelineMax
The current slide's animation timeline, which you use to easily manipulate animations. Slow them down, repeat them, reverse them. You can do GreenSock functions to easily achieve surprising effects.
Next Slide Properties
Type
Value
slider.slides.next.index
Integer
The index of the proposed next slide. The count starts from 1 instead of zero. The next slide can change at any time by a user action or API commands.
slider.slides.next.data
Object
Contains slide-related settings of the proposed next slide as well as custom slide properties set in the Slider Builder or through the data-ls attribute.
slider.slides.next.deeplink
String
Deeplink of the next slide (if any).
slider.slides.next.layersIn
jQuery Collection
The same as slider.slides.current.layersIn for the proposed next slide. The next slide can change at any time by user action or via API commands.
slider.slides.next.layersOut
jQuery Collection
The same as slider.slides.current.layersOut for the proposed next slide. The next slide can change at any time by user action or via API commands.
Miscellaneous Slide Properties
Type
Value
slider.slides.count
Integer
The number of slides in a slider.
slider.slideChangeTimeline
GSAP TimelineMax
The slide transition animation timeline, which is used when changing slides. You can use GreenSock functions to easily manipulate the transition.
Slideshow Properties
Type
Value
slider.slideshow.state
Object
An object of slideshow states, which determines whether the slider is paused or not. There are several states such as media playback, hovering over the slider, manually pausing the slideshow, etc.
slider.slideshow.sequence
Array
An array containing slide indexes, which indicates the pre-determined order of slides. This takes into account of random slideshows, and provides a reliable value without user action.
slider.slideshow.direction
String
'prev' or 'next' indicating whether the slideshow is playing forwards of backward depending on the twoWaySlideshow option.
slider.slideshow.isPaused
Boolean
Boolean indicating if the slideshow is paused at the time of execution. Depending on the pauseLayers setting, the slide animation timeline may still continue its progress towards the end of the slide. This means that layer transitions and progress timers may not be interrupted, but the slider will not commence to the next slide until resuming the slideshow.
Cycles Properties
Type
Value
slider.cycles.max
Integer
The number of cycles that the user set.
slider.cycles.current
Integer
The number of cycles that the slider has performed at the time of execution.
API methods
The below API methods can be used to control sliders externally, modify their behavior, or wire them up with 3rd party solutions. By using the right combinations of API events and commands, you can implement new features or extended the capabilities of the plugin with custom code. Please note, API events are exposed to the API commands in the same way as anything else. Be aware that most API methods will trigger the appropriate API events as well.
Method name
Description
Example
(integer)
Initiate a slide change to the specified slide number. The count starts from 1. The example on the right side shows how to switch to the third slide.
$('#slider').layerSlider(3);
nextSlide or
next
Skips to the next slide in the sequence.
$('#slider').layerSlider('next');
previousSlide or
prev
Changes to the previous slide.
$('#slider').layerSlider('prev');
replaySlide or
replay
Restarts the slide, replays all layer transitions from the beginning.
$('#slider').layerSlider('replay');
reverseSlide or
reverse
Play the slide and all transitions backwards, then pause at the beginning of the slide. Pass true as a second parameter to continue replaying the slider normally afterward.
$('#slider').layerSlider('reverse', true);
resetSlide
Immediately sets the current slide back to its starting state and pauses it.
$('#slider').layerSlider('resetSlide');
stopSlideshow or
stop
Stops the slideshow. Depending on the pauseLayers setting, the slide animation timeline may still continue its progress towards the end of slide. This means that layer transitions and progress timers may not be interrupted, but the slider will not commence to the next slide until resuming the slideshow.
$('#slider').layerSlider('stop');
startSlideshow or
start
Resumes the slideshow and re-enables the slider to change slides when reaching the end of animation timeline. Since transitions may occur even in a paused state depending on the pauseLayers setting, it possible that the timeline has already reached its end point when calling this command.
$('#slider').layerSlider('start');
pauseSlider or
pause
Stops the slider by freezing every animation taking place at the time of execution, including slide transitions when changing slides.
$('#slider').layerSlider('pause');
resumeSlider or
resume
Resumes the slider and continues playing frozen animations.
$('#slider').layerSlider('resume');
toggleSlider or
toggle
Toggles between pauseSlider and resumeSlider by respecting the current state.
$('#slider').layerSlider('toggle');
playMedia
Start playback of any visible media element on the current slide.
$('#slider').layerSlider('playMedia');
pauseMedia
Pause playback of any visible media element on the current slide.
$('#slider').layerSlider('pauseMedia');
unmuteMedia
Unmutes playback of any visible media element on the current slide. Using this event may require user interaction (i.e. click, tap, etc on page) due to browser restrictions.
$('#slider').layerSlider('unmuteMedia');
openPopup
Opens initialized Popups waiting in the background to be launched.
$('#slider').layerSlider('openPopup');
closePopup
Closes the Popup.
$('#slider').layerSlider('closePopup');
data
Returns the entire data object that the slider uses.
var data = $('#slider').layerSlider('data');
eventData
Returns the Event Data object filled with the relevant values at the time of execution.
var data = $('#slider').layerSlider('eventData');
userInitOptions
Returns the slider options provided by the user in the init code.
var data = $('#slider').layerSlider('userInitOptions');
defaultInitOptions
Returns the full list of the default slider options.
var data = $('#slider').layerSlider('defaultInitOptions');
sliderInitOptions
Returns the parsed slider options (extended by user data) used to initialize the slider.
var data = $('#slider').layerSlider('sliderInitOptions');
originalMarkup
Returns the original HTML markup that the slider was initialized on.
var data = $('#slider').layerSlider('originalMarkup');
redrawSlider or
redraw
Recalculates the slider styles and repaints the slider. Useful when you want to manually trigger responsive calculations to update the slider UI.
$('#slider').layerSlider('redraw');
destroy or
kill
Destroys the LayerSlider instance by canceling timers, removing events, freeing up allocated memory. Passing a second parameter true will also remove the slider element from the DOM.
Due to technical reasons, destroying a slider may not happen instantaneously. See the sliderDidDestroy and sliderDidRemove events for more information.
$('#slider').layerSlider('destroy', true);
Examples
Switch slides with custom controls:
<a href="javascript:void(0);" onclick="$('#slider').layerSlider(2);">Change to slide 2</a>
Combining callbacks and API methods:
The following example will bring up an alert message after every slide change with the current slide number. It can be used with the slideChangeDidComplete event callback.
function(event, slider) {
alert('The current slide is: ' + slider.slides.current.index);
}
Using API Events from external code:
LayerSlider relies and makes use of jQuery's event handling capabilities. This means that all jQuery-related event handling features and functions can be used, such as .on(), .off(), live and delegated events, attaching multiple events with namespaces, etc. You need to bind these events to the slider container element.
This version of the API was used in LayerSlider 5 and earlier versions. It is no longer supported, DO NOT use it for current/future project. We're keeping this in the documentation in order to provide you a way of porting to the new API if needed.
Event reference
Event
Description
cbInit
Fires when LayerSlider has loaded.
cbStart
Calling when the slideshow has started.
cbStop
Calling when the slideshow is stopped by the user.
cbPause
Firing when the slideshow is temporary on hold (e.g.: "Pause on hover" feature).
cbAnimStart
Calling when the slider commencing a slide change (animation start).
cbAnimStop
Firing when the slider finished a slide change (animation end).
cbPrev
Calling when the slider will change to the previous slide by the user.
cbNext
Calling when the slider will change to the next slide by the user.
Slider data
Property
Value
data['prevLayerIndex']
Returns the index of the previous slide
data['curLayer']
Returns the jQuery object of the current slide
data['curLayerIndex']
Returns the index of the current slide
data['nextLayer']
Returns the jQuery object of the next slide
data['nextLayerIndex']
Returns the index of the next slide
data['layersNum']
Returns the number of slides in the slider
data['isAnimating']
Returns true if the slider is animating at the time of execution
To list all properties in the data object just paste this code snippet into a callback function and check your browser's Javascript console:
The slider will change to the specified slide. It starts with 1.
$('#slider').layerSlider(3);
next
The slider will change the next slide.
$('#slider').layerSlider('next');
prev
The slider will change the previous slide.
$('#slider').layerSlider('prev');
stop
Will stop the slideshow.
$('#slider').layerSlider('stop');
start
Will continue or start the slideshow.
$('#slider').layerSlider('start');
data
Returns the slider data object
var data = $('#slider').layerSlider('data');
userInitData
Returns the object of the slider options which has been set by the user in the init code
var data = $('#slider').layerSlider('userInitData');
defaultInitData
Returns the full list of the default slider options
var data = $('#slider').layerSlider('defaultInitData');
Before reporting an issue
There are some common practices you should try before reporting an issue:
Check System Status
Select LayerSlider -> Options from your WordPress admin sidebar, then click on the System Status button. The page displayed there is intended to help you identifying common issues and to display relevant debug information about your site. Always try the recommendations provided by this menu (if any) before reporting an issue.
Always use the latest software versions
This includes your WordPress installation, LayerSlider, the WP theme you're using and any other plugin installed on your site. Third party plugins and themes (not hosted on wordpress.org) may not update automatically. Taking care to keep everything up-to-date can spare you from a lot of problems and frustration.
Common debugging techniques
Issues could be related to other plugins/themes and their settings. We often ask our customers to temporarily disable other plugins and switch to one of the default WP themes. This way we can quickly eliminate external and 3rd party factors. If it solves the problem, you can find which item caused the trouble by re-enabling them one-by-one and watching when the issue comes back.
Troubleshooting WordPress in 60 Seconds
WordPress site problems can have many causes, but even so, a few basic steps will help you catch most of them.
Settings, server environment, online assets
A lot of times issues occur due to incorrect settings or other environmental factors. It's always a good idea to quickly review your settings and try to find a solution in the documentation or online by searching through our ticket system for similar cases. Experiencing difficulties with saving your sliders are usually server configuration issues and it's recommended to ask your server hosting to look into these issues. They have the tools that nobody else has like diagnostic softwares, logs, etc and only they can access certain settings and configuration files. Naturally, we're here to help you and you can open a ticket at any time.
Any Issue
To-Do
Description
Review System Status report
Be sure to review the System Status report under the LayerSlider -> Options -> System Status screen. It is intended to help you identifying common issues and to display relevant debug information about your site. Always try the recommendations provided by this menu (if any) before reporting an issue.
Broken website
Symptom
Description
Unreachable site,
White / blank screen
With these symptoms, it's highly likely that there is a PHP error on your site. Knowing the exact error message can be extremely useful to understand the nature of the issue occurring on your site. However, WP ignores PHP error messages by default. Please follow this guide to enable the WP debug mode to make error messages visible.
Also, make sure that your web server meets the plugin requirements: PHP 5.3 or newer, PHP Multibyte String Extension, WordPress 3.5 or newer.
Contact with your web hosting company to make the necessary changes if it's required.
Installation & activation issues
Symptom
Solution
I cannot install the plugin
Please refer to the Troubleshooting section under the Installation menu. We've collected common causes and error messages to help you avoiding all the potential issues.
I cannot activate the plugin
Please review our Activating the plugin section. Please note, you can't use your theme's purchase code / license key if you've received the plugin that way.
Our auto-update solution requires product activation and is only available for our direct customers as described in the Updating the plugin section.
If you receive an Update package not available or similar error message during the update process it might a symptom of an interfering 3rd party theme/plugin. We are constantly notifying and working together with various authors whenever we notice such issue. Unfortunately, these issues cannot be fixed from our end and a temporary solution is updating manually or temporarily disabling other plugins and switching to the default WP theme.
Another possibility might be a stuck activation. If you've used our online tools to remotely deactivate a site (or asked us to do the same on your behalf) your site might no longer be activated. The same can be true if your license key has been revoked due to a refund or another reason. In cases like this deactivating your site and then immediately re-activating it can help.
HTTPS (secure) site issues
Symptom
Solution
Mixed Content,
Insecure Content
or any HTTPS related issue
Any part of your site can be responsible for HTTPS mixed / insecure content issues. To have a better understanding about what causing this issue, please read and follow the guide provided by Google on this matter by clicking here.
Navigate to Settings -> General on your WP admin area and verify that both the WordPress Address and Site Address fields are containing the right URL with the https protocol included.
Please note, as this post mentions, load balancers, proxies, and other network-related solutions and services may cause WordPress to not recognize the correct protocol. LayerSlider uses native WP functions to generate URLs, thus in many cases it is a site/server-related issue that can easily affect other assets on your site.
General issues
Symptom
Solution
Instead of the slider only the shortcode appears
Although WordPress parses shortcodes at most places, there are some exception. Most notably the Text Widget, that will ignore any shortcode. To fix this you can download 3rd party solutions that will not ignore your shortcodes.
An error message says the slider was not found
Please make sure that you've inserted the right shortcode, and the corresponding slider wasn't removed previously. Remember, the admin interface can list your removed sliders, but they will not show up on front-end pages until you restore them.
The slider doesn't show up at all
This most likely caused by a Javascript error on the page. Please try to temporarily disable other plugins and switch to one of the default WP themes to see if it helps.
The slider only shows a loading indicator
This issue might occur when the slider cannot load some of the images used in the slider. They might be removed from your WP Media Library or pointing to incorrect URLs.
The slider doesn't proceed to the next slide
This is most likely the exact same issue described in the previous point.
Some images don't show up in the slider or have incorrect size/position
This is usually the symptom of image preloader solutions. It can be a part of another plugin or a built-in feature in your theme. Please review your settings, since most authors offer a way to disable this feature.
Flashing items when changing slides
This issue usually caused by a duplicate version loaded of the GreenSock animation library on your site, which may be used by your theme or another plugin. At the moment there isn't any known method to avoid issues like this, other than editing the theme/plugin files and manually prevent loading this library.
Layers quickly appearing before animating into the slide
See the previous point. It's the same issue.
The slider doesn't seem to respond changes made on the admin interface
If you're using a caching plugin like W3 Total Cache you need to manually empty the caches, so you can see the changes in real-time. These plugins usually offer a setting to disable caches for logged in admin users.
Video issues
Symptom
Solution
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 gray 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 making your videos invisible in some cases.
Videos in the slider have weird size or position
This usually caused by the FitVids Javascript plugin, which can be a part of other plugins or the theme you're using. By temporarily disabling other plugins and switching to another WP theme you can find which item on your site causes this issue. Please contact the plugin/theme author to solve this issue.
HTML5 self-hosted video/audio doesn't work
Please make sure you're using supported media formats by clicking here. We recommend using MP3 or AAC in MP4 for audio, and VP8+Vorbis in WebM or H.264+MP3/AAC in MP4 for video. The supported formats may vary between browsers, but you can also provide multiple formats if needed.
jQuery-related issues
Symptom
Solution
Multiple jQuery issue
Your site includes the jQuery library in multiple times. This could be an issue with another plugin or the WP theme you're using. Enabling the Put JS includes to body option in the Troubleshooting & Advanced Settings box should fix this issue.
Old jQuery issue
LayerSlider requires using an up-to-date version of the jQuery library. We strongly recommend to have at least version 1.8, but some of the new features might only work with newer releases.
If LayerSlider shows an "Old jQuery issue", it's likely that another plugin or your WP theme uses an outdated release. Please make sure that every plugin and your theme is up-to-date and you're using the latest releases. You can also try to enable the Use Google CDN version of jQuery option in the Troubleshooting & Advanced Settings box, but it's possible that you need to contact with plugin/theme author and ask for a solution if nothing helps.
jQuery Transit issue
This issue occurred when another plugin/theme loaded a second copy of the jQuery Transit library. Since LayerSlider v5.0.0, we're no longer using jQuery Transit, and this issue will not affect users after upgrading.
Saving/Database issues
Symptom
Solution
I cannot save an existing slider
There can be several reasons why this happens. Most likely it is an incompatibility with another plugin that causes a Javascript error or some kind of server-side issue. Please try to temporarily disable other plugins and switch to one of the default WP themes to see if it helps.
I cannot add/edit/remove sliders
If you're experiencing multiple issues managing your sliders, there's probably a database related issue. A common workaround is to disable LayerSlider and then immediately reactive it. This will trigger the activations scripts in the plugin that will attempt to rebuild/repair the DB table that LayerSlider uses. If this doesn't help, please contact your web hosting provider and check for any database related problems on your sites such as permissions issues.
All of my work is just disappeared
This most likely the same issue described in the previous point. Your work is probably still intact, but a database issue could prevent the plugin to show them on the admin interface.
Other issues
Symptom
Solution
The LayerSlider menu item doesn't show up on the admin sidebar
By default LayerSlider is only accessible for admin users. See Getting Started / Permission settings to change this behavior. If you have an admin account it's possible that these settings have already been changed and the plugin page became unavailable for you.
Developer documentation
It's for developers!
You can skip this part of the documentation if you are not a developer. The developer documentation was made for theme authors and programmers who want to incorporate LayerSlider in their work or modify and extend its capabilities.
Licensing, Theme Integration, WP Plugin APIs
The developer documentation includes licensing terms, theme integration guides, plugin APIs, filter and action hooks, and any other WordPress related assets you might need.
The developer documentation focuses on licensing, theme integration and WordPress related assets. However, the Javascript-based API to control your sliders on the front-end is part of the Advanced Customization section. If you are looking for that API documentation, click on the link below.
Say hello to the redesigned Template Store with an all- new look and features.
Introducing a new content pack. 65+ professionally made Popup templates that are perfect drop-in replacements for most occasions. Start lead generation and interact your visitors with this eye-catching collection. Check out the demos and learn more
Countless fixes and improvements under the hood.
Changes in LayerSlider 6.9.4
This release improves compatibility with WordPress 5.3 and is strongly recommended for everyone using the latest version of WordPress.
Added new 2D slide transitions.
Fixed interface and appearance issues under WP 5.3.
Fixed the LayerSlider Gutenberg block under WP 5.3.
Various fixes and improvements under the hood.
Changes in LayerSlider 6.9.3
Updated some phrases and description in LayerSlider due to leaving Envato Market. For example, "purchase code" is now called "license key".
Updated documentation
Changes in LayerSlider 6.9.2
Fixed an issue that prevented displaying sliders properly under hidden areas such as tabs in very rare circumstances.
Various improvements for PlayByScroll sliders making the whole experience much smoother.
Updated the bundled GreenSock animation engine library, which can provide increased performance in certain cases and take advantage of any new features that modern web standards offer.
We've implemented a workaround in GreenSock to fix an issue caused by certain 3rd party solutions that resulted in a broken admin interface.
Changes in LayerSlider 6.9.1
Fixed an issue with the Gutenberg editor block that caused your sliders not always displaying on the front-end pages.
Improved the LayerSlider News section to prevent caching, so it always shows the latest releases.
Changes in LayerSlider 6.9.0
Localization
Ласкаво просимо! Thanks to Igor R., LayerSlider is now fully translated into Ukrainian.
Several UI changes to handle longer words and phrases in foreign languages.
Slider Groups
LayerSlider now supports Slider Groups, which are basically folders for your sliders.
Importing multiple sliders or downloading slider packs from the Template Store now automatically groups them together.
You can freely create your own slider groups by dragging a slider and dropping it on another. Removing sliders from groups follows the same principle.
There's a new bulk action to group selected sliders together in a single step.
Slider Groups is only available in the Grid View at the moment. The list view displays sliders without grouping and you won't notice anything different than it used to be, even if some sliders are in a group.
Gutenberg may not be perfect just yet, but it's the future of WordPress editing. Thus Slider Groups is available in the Gutenberg block, but not in the TinyMCE classic editor.
DEVELOPERS: Make sure to check out the Working with sliders section in the developer documentation to be sure you're compatible with the new Slider Groups feature. There's also a new and very easy way to implement slider pickers with minimal coding via the LS_SliderLibrary JS API.
Interface refresh
LayerSlider has a new logo and a slightly different branding.
The sliders Grid View has a much more modern design with all sorts of tweaks.
You can now also select sliders in the grid view by holding Ctrl/Cmd and clicking on them. Slider selection also has a somewhat changed look and feel.
Every modal window has been rebuilt. They're faster, more modern looking, respond to keyboard shortcuts, most of them is now responsive, and contains slight UI tweaks for your convenience.
You can now instantly import sliders just by dropping files on the Import Sliders tile.
A new welcome/about screen that also includes GDPR settings.
Removed several annoying or obstructive modal windows like the share sheet of the GDPR settings for first time users.
Other new features
Layers can now have background images. The relevant settings can be found under the Style tab in the newly added Background section.
Added new layer style option to prevent mouse events.
Added WooCommerce 'Customer' role for the Popup Target Audience settings.
LayerSlider -> Options -> Advanced now includes an option to suppress debug information.
Misc
Export files now have formatted file names, including the name of slider, so it's easer to find the one you're looking for.
Fixed audio file selection issue in case of media layers.
Fixed an issue that prevented loading your images in very rare circumstances.
Fixed known issues embedding private/unlisted Vimeo videos.
Way too much small interface tweaks and other kinds of fixes.
Changes in LayerSlider 6.8.4
WordPress 5.2 introduced changes to server requirements that may prevent some users updating to the latest WP releases. LayerSlider will not follow this change in the foreseeable future and is fully compatible with both new and older WP releases.
Changes in browser implementation of autoplay policies now allow us to display the Unmute button introduced in v6.8.0 for all supported media sources and in all browsers.
Countless media playback improvements and fixes.
Fixed the stretched/distorted background image issue that affected some users mostly with zoomed-in browser settings.
The "Enhanced lazy load" advanced option now also takes care of the 'srcset' attribute to prevent any unwanted network traffic.
Many other improvements and fixes under the hood.
Changes in LayerSlider 6.8.3
The new WordPress editing experience is here and LayerSlider provides a full-fledged Gutenberg block for your convenience. The helper utility for the Classic Editor remains available, so you can easily insert sliders no matter what page builder do you prefer.
LayerSlider -> Options -> Advanced now offers settings to disable editor extensions.
Added [author-avatar] post placeholder for Dynamic Layers.
Deeplinks can now be used for back and forth navigation instead of just starting the slider with a specific slide.
Improved support for Vimeo videos
Fixed minor media playback issues
Minor UI changes
Changes in LayerSlider 6.8.2
Added the Pixie Image Editor by Vebto. This is a replacement for the Adobe Image Editor SDK that was removed from the last release due to its end-of-life.
Huge file optimizations. This updates makes sure that every resource is as compact as it can be, so you and your visitors can save bandwidth and server resources.
This update also comes with a horde of small bug fixes and improvements, focusing on stability, performance and aesthetics.
Some small UI changes for usability purposes.
Fixed media playback issues with static layers.
Changes in LayerSlider 6.8.1
Fixed an issue with embedded media on secure (HTTPS) sites that we caught right after releasing the previous update.
Changes in LayerSlider 6.8.0
We're back! Although you didn't hear from us for a while, we're still actively working on LayerSlider. In fact, we have some big announcements coming soon. Stay tuned!
In the meantime, here is an update that we planned to release much earlier. We're very sorry about the delay. Future updates will now arrive at the usual rate.
A complete media handling overhaul
Anything media related in LayerSlider has been rewritten from scratch.
We're now using newer APIs that should be more reliable and should eliminate strange edge cases.
Custom embed options specified in the URL is now 100% tracked and recognized by LayerSlider.
A new media option loop was added for media layers.
Introduced the muted setting for media layers. A special option called Offer to unmute is there, so you can provide a non-intrusive experience to your visitors by offering a special button to easily restore sound on an otherwise muted video.
Improved compatibility with media autoplay policies. Some web browsers might prevent video/audio layers to be autoplayed based on a number of different factors. Muted autoplay is always allowed. This new update now falls back gracefully and plays the media muted whenever the restrictions would apply. In cases when media should have been autoplayed with sound, we're offering an easy way for page visitors to restore sound with a click of a button.
The slideshow will no longer wait indefinitely for a paused media to finish. After pausing media playback the slider will wait a few extra seconds, but it will eventually continue the slideshow if all animations on the slide has completed and the slider wants to switch slides.
Other significant improvements for media handling, especially for mobile and tablet devices.
New smart links (LayerSlider Action) to manage media playback: play, pause & unmute.
New API commands: playMedia, pauseMedia & unmuteMedia
New API events: mediaDidStart, mediaDidStop
PS: The new unmute button offered to easily restore sound may not always be visible for embedded players (i.e. YouTube and Vimeo). Browser support varies and we expect them to support delegating autoplay permission to embedded players in the near future. HTML5 self-hosted videos are working as expected in all browsers.
New features
You can now override slider settings via the shortcode or the PHP function. It can be useful if you want to make small changes to the same slider in certain situations without having duplicates. For example, you might want to change the slider skin on some pages to fit better to a different page style. Check the Overriding settings section for more information.
Improvements
This update improves the reliability of our online services. Serving plugin updates, downloading templates and other online features should now work even in very unusual server environments.
Other
The Adobe Image Editor was removed due to its end-of-life. A replacement solution will be added very soon in another update.
Bug fixes
Fixed qTranslate compatibility that affected sliders inserted by certain page builders in some cases.
Fixed an issue that affected Popup sliders when used with the Origami slide transition.
Fixed the reverseSlide API method not properly replaying the slide when the second parameter was present.
Changes in LayerSlider 6.7.6
Kreatura is committed to user data protection. To keep pace with the new data protection laws taking effect on May 25, 2018 in the European Union, we are updating our privacy policies. Please, do visit our General Data Protection Regulation page for more information.
This update introduces a modal window asking your consent for using certain features in LayerSlider. A new Privacy tab has also been added to the LayerSlider -> Options page where you can enable/disable these features & services.
Changes in LayerSlider 6.7.5
This release focuses on plugin-wide improvements and bug fixes including lots of less visible changes to enhance compatibility and stability.
Improvements
Greatly improved Play By Scroll feature, which now works as expected if a slider covers the entire page or located at unusual places.
Improvements to HTTPS secure sites to overcome some edge cases that might affected certain sites very rarely.
Improvements to script loading and handling, which provides extended compatibility with CDNs and JS minify/combine features commonly used in themes and cache plugins.
Bug fixes
Fixed pre 5.3 PHP parsing errors.
Fixed date localization in dynamic posts.
The Popup click trigger now prevents navigating away from page if it's set on a linked element.
Other changes
Theme authors now have the ability to enforce certain settings located under LayerSlider -> Options -> Advanced in order to maximize theme compatibility.
Removed the "Put JS includes to body" advanced setting. The "Include scripts in the footer" option should be used as an alternative.
Lots of under the hood improvements and bug fixes.
Known issues
Chrome 66's Autoplay Policy Change: Google introduced new browser restrictions, which will prevent automatic video/audio playback in certain situations. Autoplay is now allowed only when either the media won't play sound, after the user clicks or taps on the site, or (on desktop) if the user has previously shown an interest in media on the site.
Another follow-up update will arrive soon, which will provide further options to mitigate these restrictions. Since it's governed by the browser, there is no way to restore the previous behavior. However, we can supply alternate options like autoplaying muted videos where visitors can restore sound with a separate button.
Changes in LayerSlider 6.7.1
Fixed an issue that caused Popup sliders not displaying in some cases.
Fixed the Origami transition on slides with no slide background image.
Fixed image pickers to always display high quality preview images.
Fixed video/audio MIME-types when selecting multiple source formats.
Fixed newly imported slides to always show the proper preview image.
Further minor improvements and bug fixes under the hood.
Changes in LayerSlider 6.7.0
New features
A new export method: Export as HTML. This is very helpful if you're using the WordPress version of LayerSlider for its editor, but you want to export the final results for the jQuery version.
The Slider Builder now automatically collapses your WordPress admin sidebar to make a bit more room for your content. This will not affect other pages and your preferred settings elsewhere. You can customize this behavior under Screen Options.
The complete redesign of slide tabs in the Slider Builder:
The new design shows a preview of all your slides, allowing you to quickly find the slide you want to work with.
Slide titles can now be edited right away, no more double click to edit action is required.
Options like "Duplicate Slide" and "Hide Slide" are now integrated into slide tabs and you can access these options with the arrow icon or by right clicking on the slide preview.
Performing any kind of slide action no longer requires you to jump to the appropriate slide first. You can make the necessary changes without changing the active selection.
Countless other improvements like marking hidden slides, intelligently counting slides, creating duplicates next to their origin, etc.
To take advantage of the new slide tabs and have gorgeous slide previews, a new "capture slide" option has been added. It will automatically generate a snapshot of your slides, including all the layers. You can even make a snapshot of a live slider by using the Timeline feature, so everything is at your disposal to capture the best possible moment.
All of the Template Store contents have been updated to take advantage of the changes and new features introduced in the last 12 months. This includes the new slide tabs, the updated templates all have gorgeous preview images, etc.
LayerSlider -> Options -> Advanced now includes several new options:
Always load all JS files: Helps with CDNs and JavaScript minify/combine plugins in case if you experience issues.
Defer JavaScript loading: Help eliminating render-blocking JavaScript files.
RocketScript compatibility: CloudFlare's Rocket Loader now has a dedicated option to ignore LayerSlider's files, which helps avoiding certain issues.
Improvements
For easier access, you can now right click on sliders in the grid view to display slider actions, which would be available with the arrow icon otherwise.
Countless small UI and usability improvements all over the plugin.
Bug fixes
Fixed an issue that caused certain images not always showing up if you've moved your site or changed the site URL.
Fixed an issue that prevented exporting empty sliders.
Many under the hood bug fixes.
Changes in LayerSlider 6.6.8
Improved reliability of our online services like Auto-Updates, especially in a multi-domain setup. If you've experienced issues previously, please try to reactivate your license after updating to this new version.
Added support for custom slide properties. You can now specify your own slide settings for increased customization via the LayerSlider API.
The LayerSlider API's Event Data object now contains new shortcuts to retrieve slides data.
Updated documentation, especially dealing with activation-related questions.
Changes in LayerSlider 6.6.7
Fixed certain issues with the Timeline and Popup features on the admin interface.
Fixed PHP debug messages.
Fixed certain user interface issues.
Fixed an API issue regarding sliderDidDestroy and sliderDidRemove events.
Updated developer documentation focusing on licensing terms and theme integration.
Changes in LayerSlider 6.6.5
This release includes important bug fixes.
Fixed an issue that caused icons not appearing in front-end sliders in cases.
Workaround for WP issue #25449 that resulted some URLs not having the appropriate HTTPS protocol when it is needed.
Minor under the hood improvements.
Changes in LayerSlider 6.6.4
This release includes important bug fixes.
Fixed the Blend mode Premium notice, which appeared incorrectly for admins above the front-end sliders in certain cases.
Fixed the rounding issue when using decimal percentage values for positioning.
Fixed the random starting slide in Slideshow settings.
Changes in LayerSlider 6.6.3
This release includes important bug fixes and various improvements.
Various fixes and improvements to slider markup caches:
LayerSlider now serves fresh, non-cached versions for admins and anyone who can manage sliders, even if caching is enabled.
Updating the caches more accurately to always maintain a consistent state.
Adopted accessibility standards to make LayerSlider more accessible for people with disabilities.
Continued optimizing the generated slider markup for efficiency.
Added layerslider_skin_url and layerslider_attr_list filter hooks for developers. Check the Filter reference for more information.
Several minor improvements in the LayerSlider API.
Various other bug fixes and improvement under the hood.
Changes in LayerSlider 6.6.2
This release focuses on efficiency and bringing you meaningful improvements and bug fixes.
Efficiency
LayerSlider now uses a slightly more compact and efficient source code out of the box.
Disabling the 'Use srcset attribute' option now completely removes the srcset and sizes attributes from the generated source code instead of just disregarding them in the plugin internals. This can drastically reduce the generated source code size.
Dropdown select boxes under layer styles now include an 'Inherit from theme' option. This new and now default value means that you have no preference for a given option and your WP theme is free to apply its own styles (if any). This makes possible to generate a much cleaner and more efficient source code, but you can still apply any styling settings you want in order to match the appearance with the front-end.
Added Enhanced lazy load option to Slider Settings -> Misc in Advanced Mode. Please read the option description on the admin interface to learn more.
Other improvements
The Template Store now shows a warning message in all cases when it encounters a server issue.
Some minor changes that make using the Slider Builder interface more convenient.
Bug fixes
Fixed all known issues with the new linking fields that was introduced in the previous update.
Fixed displaying the most recent snapshot in Revisions.
Fixed a PHP debug message displayed in rare cases.
Changes in LayerSlider 6.6.1
Among other improvements and bug fixes, this release mainly focuses on media handling and the complete overhaul of how links work in LayerSlider.
Improved linking
Page/Post chooser: Linking fields now offer an option to choose a Page, Post or Attachment on your site. With built-in search, you can easily and quickly select any content you want to link to.
Auto-generated URLs: When you use this new Page/Post chooser option, WordPress will automatically generate the appropriate URLs to make sure they follow your permalink settings and play nice with other plugins like WPML.
Link bindings: The Page, Post or Attachment you choose with this new option will be tied to the chosen item, which allows LayerSlider to track changes on your site. No more broken links due to permalink changes or anything else.
Formatted URL fields: Linking fields also received some UI changes to better reflect your settings. When you use the built-in features, they will show descriptive messages like "Linked to WP Post: Hello world!" or "LayerSlider Action: Switch to the next slide" instead of displaying arbitrary URLs, which aren't that helpful in most cases.
Attachments: When you choose an attachment, the link will directly point to the file instead of the attachment page. This is helpful when you want to use 3rd party items like a Lightbox/Fancybox plugin.
Compatibility: Your sliders will continue to work the same. The linking field is there as it was, you are free to manually enter whatever URL you would like to use. However, the above described advantages are only available if you use the newly introduced options.
Improved media handling
Modal window: Media layers now have a dedicated modal window where you can easily add video / audio. A preview feature has been added to see the results prior making the changes.
Insert from URL: Added option to insert videos from YouTube or Vimeo URL.
Inline editing: Similarly to other layer types, you can now double click on media layers in the Preview to bring up the "Insert Media" modal window.
Other improvements
Improved Preview selection.
FontAwesome is a popular icon font to display icons. Since several 3rd party items also use it, it was possible that some icons did not appear in your front-end sliders because another theme or plugin loaded an older version. LayerSlider now makes sure to always load its own built-in version that is up-to-date.
Bug fixes
Links now correctly follow hover transitions.
The WP Media Library now properly displays uploaded video and audio files.
Fixed a PHP notice, which occurred in case of embedding an empty slider without layers on your front-end pages with WP Debug Mode enabled.
Changes in LayerSlider 6.6.0
This release focuses on improving the Slider Builder. It brings long awaited and highly requested editing capabilities as well as new new features that will enhance your content in many ways.
New editor features
Import slides: With just a couple of clicks, you can import any slide from any slider you have on your site. You don't even have to navigate away, it will be added right into the editor where you want it.
Import layers: Similarly to slides, a nice UI will help you to import any layer from any slider quickly and super easily.
New Context Menu: Right clicking in the Preview area will open the new context menu. It allows you to select common tasks like adding/removing/duplicating layers as well as to perform copy/paste operations, aligning layers and many more. The old behavior to list and select overlapping layers is also integrated into this new solution.
New layer & content types
Button layer: Buttons now have a dedicated layer type. They also received some presets you can easily apply to have different types of buttons with different styles.
Icon layer: There's also a new Icon layer type. You can choose from 675 pictographs to easily include them in your sliders.
Icon support: Icons can also be used in combination with other layer types like Buttons, Text or HTML layers.
Editor changes
Choose before adding: The Add New button now acts as a drop down to choose the type of layer you want to use. Certain layer types (Image & Icon) now immediately prompts you to select the content you want to add. For example, in case of an Image layer, this would be the WordPress Media Library where you can immediately select or upload an image.
Layer placeholders: No more invisible "contentless" layers. Now every layer type has a placeholder that visually represents it within the editor.
Inline editing: Double clicking on layers to edit them right in the Preview area now works with non-textual contents as well like Icon or Image layers. In those cases the modal window to add/replace an icon or image will open.
Align layer options: besides the grid view, now you can also align layers along the horizontal or vertical axis separately.
Layer-less slides: Slides no longer have an included empty layer by default.
Other new features
Added "Skip Slide Breaks" option for Play By Scroll sliders to eliminate the stop between slide changes.
Improvements
Improved compatibility with image preloaders.
Special effects like the Origami transition can now be mixed with regular slide transitions.
Prevent re-initializing sliders on the same element multiple times.
Improved compatibility with GSAP sandboxing enabled.
Bug fixes
Fixed rewinding video / audio layers after changing slides.
Fixed Play By Scroll starting position detection.
Fixed global background size option not always working as expected.
Fixed an issue that could break layer styles in rare cases.
Many more under the hood fixes and improvements.
Fixes for developers:
Fixed an issue with the destroy API method.
Fixes for overriding default settings like skins that not always worked as expected.
Fixes in the LS_Sources class that affected externally loaded skins and other materials.
Changes in LayerSlider 6.5.8
New features
New option to add your custom class names to the slider container element.
Improvements
LayerSlider now performs significantly better on your front-end pages due to some fixes in the caching implementation.
Further improvements in the WPML implementation: shortcode contents will no longer show up in String Translation under the 'default' text domain.
Changed the Template Store UI and animations to enhance performance on older devices.
Bug fixes
Fixed the right click menu in the Slider Builder, which enables you to easily select overlapping layers.
Fixed rare issues with layer selection, layer locking and undoing changes, which affected the Slider Builder in very specific cases.
Fixed previewing Play By Scroll sliders, which previously left the Slider Builder in a non-scrollable state.
Changes in LayerSlider 6.5.7
This update fixes a PHP debug message displayed when your site has the WP debug mode enabled.
Changes in LayerSlider 6.5.6
Changes of media layers:
Autoplaying videos will no longer display the play icon for that brief moment, making background videos and in other cases a perfectly smooth video surface.
You now have the option to set the volume of background videos. They are muted by default and there was no way to change that previously.
The 'Controls' and 'Show Info' media layer settings now include an 'Auto' option. It is based on the most common use cases and respects settings set by the embed code or HTML attributes.
The 'Controls' option for media layers was not working as expected in some cases. For example, you can now enable controls for audio layers as well.
Media layers are now properly pause and resume playback (based on your settings) when closing/re-opening a Popup slider.
Changes in the WPML implementation:
When setting up the 'Dynamic content from posts' feature, the Post Options screen now shows only the posts belonging to the currently selected language set by WPML. Duplicate entries created as a translation will be filtered out and can be reached by choosing the corresponding language from the WPML menu on the top admin bar.
The 'Dynamic content from posts' feature now lets WPML to generate the post permalink on its own. This ensures to always have the appropriate URL based on your WordPress and WPML settings.
Fixed an issue that could make layers unselectable in the Slider Builder when you used 'class' as a custom layer attribute.
Fixed an issue that caused Google to index the 'static' plugin folder causing unwanted search results.
Fixed the OS native fullscreen mode in Firefox.
Fixed previewing the Origami transition in the Slider Builder.
Fixed an issue in the Dynamic content feature that could break the Slider Builder interface in very rare cases.
Increased compatibility by workarounding certain issues in 3rd party plugins and themes.
General fixes and improvements under the hood.
Changes in LayerSlider 6.5.5
This update brings smart editing features to the Slider Builder among many other important bug fixes and improvements.
New features
Edit in Multiple Selection Mode is here. You can now apply any setting to all selected layers at once.
Finding the perfect Font family and Font size is easier than ever. Just hover over the list items and quickly see a real-time preview in the Preview Area.
Improved compatibility with WPML: layer edits no longer show up as new entries in WPML's String Translation module, instead they are marked as 'Translation needs update'. Due to backwards compatibility, this new implementation of WPML will only be used in newly created sliders. We've also updated the Multilingual Sliders section of this documentation.
Multi-selecting layers is now also available in the layers list area (below the preview) by holding the Ctrl/Cmd key and clicking on layers.
Added range-select support for the layers list area by holding down the Shift key when selecting layers.
You can now also multi-select layers in the right click "overlapping layers" menu by holding the Ctrl/Cmd key and clicking on items.
Multiple-selection is now easily dismissible just by clicking on the desired layer again.
The whole Preview Area has been made much more fluid, changes are now appearing without delay.
The Undo Manager now restores layer selection as well.
The System Status now checks for database related issues and an Update Database button has been added for fixing potential issues whenever it's possible.
Bug fixes
Fixed a PHP error that effected saving sliders in some cases.
Fixed an issue that prevented using multiple LayerSlider plugins (Origami, Popup, etc.) at the same time.
Fixed an issue that in some very rare cases caused your sliders to not show up properly.
Fixed some rare issues in Undo Manager.
System Status now correctly shows Install Location on Windows servers.
Changes in LayerSlider 6.5.1
Fixed a PHP error that might caused HTTP 500 Internal Server Error in some cases with older versions of PHP.
Popups is a completely new way of using LayerSlider and it greatly extends its capabilities and what you can build with the plugin. Combining our strong foundation and the vast number of features we already have with the newly introduced Popup feature makes LayerSlider one of the best choice among popup plugins. Click here for more information and live examples.
Thanks to conseillerphytoaroma, the French localization has been updated to cover areas that weren't translated before.
Added new skin: Photo Gallery
Added "Change URL hash" advanced option to Slider Settings -> Slideshow. Enable it to update the URL hash as you navigate in the slider based on slide deeplinks. This makes it possible to share URLs that will start the slider with the currently visible slide at any given moment.
Added "Prefer Blend Mode" advanced option to Slider Settings -> Misc. Enable this option to avoid blend mode issues with slide transitions. Due to technical limitations, this will also clip your slide transitions regardless of your settings.
Greatly enhanced the Global Hover feature introduced in the previous release.
The admin UI now uses deeplinking to always open at the same location when you refresh the page.
Fixed overflowing issue and improved multiple selection in the new WP text editor "Add LayerSlider" plugin.
Changes in LayerSlider 6.4.0
Bonjour! Thanks to conseillerphytoaroma, LayerSlider is now fully translated into French.
Sziasztok! We've also added an experimental Hungarian localization in this release.
Psst! More languages are on their way! Internationalization in LayerSlider underwent a major overhaul to provide high quality localizations and make translators' life much easier.
The English locale has also been updated. Instead of using typewriter characters, we now have nicely formatted punctuation with curly quotes and apostrophes.
Added new Google Fonts script subsets: Arabic, Bengali, Gujarati, Gurmukhi, Hebrew, Kannada, Malayalam, Myanmar, Oriya, Sinhala, Tamil, Telugu and Thai. Welcome, newcomers! :)
In cooperation with WPBakery, this update introduce changes to improve compatibility & integration with future versions of Visual Composer. Developers should check our updated Filters reference in the Developer documentation.
Added "Important Notice" feature. In cases of important and urgent matters, we can now display a small banner on the admin dashboard to notify everyone. These might be security issues or other justifiable cases. Hopefully, you will never see any of them. :)
Entirely new WordPress text editor plugin to insert sliders into your posts and pages. Besides its drastically improved user interface, it also supports keyboard shortcuts, multiple selections and embed options.
Added a new premium feature: Global Hover. Create spectacular effects by triggering the Hover Transitions of all layers at once when you hover over the slider with your mouse cursor. A simple example demonstrating this can be found here.
Added "Start immediately" option to the Play by Scroll feature. Now it's possible to automatically start playback and only pause sliders at the first keyframe instead of waiting users to scroll down.
Added option to override the starting slide of sliders in the shortcode and widget settings.
Added letter spacing option to layer styles so you can change the character density in a line or block of text.
Improvements
Enabled word wrapping in CodeMirror code editors.
The System Status now has better recommendations with providing the ideal values of each setting.
While LayerSlider continues to require PHP 5.3.0 or newer, on the global scope it no longer uses language features that is not available in PHP 5.2.4. This ensures better overall compatibility with WordPress on pages where LayerSlider is not being actively used.
Updated documentation to fix page jumping issues when deeplinking.
Bug fixes
Implemented a potential fix for CloudFlare's Rocket Loader issues.
Fixed the image chooser button when using the "Insert image from URL" option.
Fixed an isssue that prevented displaying the slider actions popup in some rare cases in the List View.
Prevent slider selection (colored highlight) when switching into full screen mode by doubling clicking on the slider.
Fixed certain issues with the Outline, Numbers and Rounded Flat skins.
Fixed Blend mode with the Origami transition.
Fixed alt attributes on the slide thumbnail images.
Fixed an issue with the sliderDidRemove event.
Fixed a rare issue with the opacity option of the Hover Transition.
Countless other bug fixes and improvements throughout the plugin.
Changes is LayerSlider 6.3.0
Introducing a new premium feature: Revisions. Have a peace of mind knowing that your slider edits are always safe and you can revert back unwanted changes or faulty saves at any time. This feature serves not just as a backup solution, but a complete version control system where you can visually compare the changes you have made along the way.
Additional changes:
Improved compatibility with *really old* and outdated slider versions.
Fixed rare issues when copy-pasting layers across slides and sliders.
Improved Auto-fit option in Slider Builder.
Changes is LayerSlider 6.2.1 & 6.2.2
This update contains important security fixes. We strongly encourage everyone to install it as soon as possible. [Thanks to WpHutte - wphutte.com for reporting.]
Version 6.2.2 was released shortly after v6.2.1 to solve an API issue.
New features
Added option to choose whether the slide link should be on top or underneath layers.
The Template Store can now import slider packs. Stay tuned, they're arriving soon!
The System Status now checks the install location of LayerSlider and warns you about potential issues (if any).
Added slide deeplink names to the LayerSlider API.
Improvements
Lots of improvements in importing sliders.
The premium features notification now lists the exact premium features being used in sliders.
Bug fixes
Important security fixes.
Fixed slide linking that has accidentally been broken by our previous update.
Fixed an issue in IE11, which caused the browser to jump to the top of the page after slide change in some cases.
Fixed video overlay image position preview on the admin interface.
Changes in LayerSlider 6.2.0
New features
Introducing a new premium feature: Blend modes. Blend modes are an easy way to add eye-catching effects and is one of the most frequently used features in graphic and print design.
The admin UI now warns against potential issues when selecting certain options, which are commonly misunderstood and would result unexpected behavior.
Added OSD notifications for certain keyboard shortcuts (e.g. Ctrl/Cmd + S for saving the slider) and a corresponding setting under Screen Options to enable/disable this feature.
Added layerslider_root_url filter to override paths. Check the Developer Documentation for more information.
Improvements
Improved compatibility with older sliders.
Improved handling of font variants when importing Google Fonts from templates.
Certain number input fields are now stepping in more appropriate intervals when pressing the arrow buttons.
Updated and extended some parts of the documentation.
Bug fixes
A massive update for multimedia layers:
Fixed video size and positioning issues, which was present in rare edge cases.
Fixed occasional playback issues with videos being on the first slide.
Fixed the slideshow not progressing forward in cases when there was only one video layer on the slide.
Hiding a media layer with the Device support feature will now also disable media playback on the corresponding devices. In addition, background videos will also show the video poster image as a fallback. This enhances user experience on mobile devices that has limited playback capabilities due to OS/browser restrictions.
Various minor bug fixes and improvements.
Fixed image chooser when using the "Use post image" option.
Fixed the "Use post URL" option in linking fields.
Fixed the Slider Settings -> Appearance -> Global background image option to always use the appropriate URL.
Fixed the "Use GreenSock (GSAP) sandboxing" option not always taking effect.
Fixed an issue that could empty your Google Fonts collection when reinstalling the plugin.
Fixed a rare issue that affected users trying to change settings in the Advanced Settings section without having sliders.
Fixed issues caused by applying text transitions on non-text layers
General UI and under the hood improvements and bug fixes
Changes in LayerSlider 6.1.6
This update fixes every issues that we accidentally introduced in our last release (v6.1.5). We were super busy to resolve this as soon as we were able to and we sincerely apologize everyone for the inconveniences this might caused. Thank you for your understanding and patience.
New features
Added option to enable/disable GreenSock (GSAP) sandboxing to maximize compatibility with other plugins.
Changes in LayerSlider 6.1.5
This is the first update in line of our upcoming new releases developed in parallel. This update addresses most of the issues surfaced recently, introduce a couple of new features and lots of under the hood improvements. LayerSlider 6.2.0 will shortly follow this update to fix any remaining known issues and bring new templates and other surprises.
New features
Added option to set a custom slider preview image (like the way Template Store sliders are displayed) in Slider Settings -> Misc.
Added a dedicated stacking order (z-index) option to layer styles.
Improvements
System Status will now report about more potential issues and provide more helpful messages explaining how to fix them.
Our online services received a lot of improvements and provide helpful details in case of a detected issue.
Increased the number of post items you can choose from Post Options.
Bug fixes
Fixed deeplinking issues.
Fixed Hover Transition mixed with layer linking.
Fixed the Stretch option of the slide background image size setting.
Fixed mobile detection under certain versions of Internet Explorer.
Added slider filters to control on which pages a slide should be displayed.
Added new smart links options.
Improvements
Improved compatibility with older sliders.
Improved compatibility with Internet Explorer 11.
Improved compatibility with older versions of the GreenSock library.
Bug fixes
Fixed orientation change issue on Android devices.
Fixed layer stacking (z-index) issues on iOS and Safari.
Fixed custom video poster images
Fixed the Pause on hover option not being saved correctly.
Fixed layer attributes in front-end sliders.
Fixed the minimum font size options.
Fixed footer and conditional script loading options not working properly in some cases.
Fixed maxRatio issue.
Countless other improvements and bug fixes.
Changes in version 6.0.6
Fixed slider export issues that affected some users.
Fixed the AltGr key in keyboard shortcuts.
Added Screen Option to disable keyboard shortcuts.
Other minor bug fixes and improvements.
Changes in version 6.0.1 – 6.0.5
Improved stability and compatibility with older versions of LayerSlider.
Fixed known issues introduced in LayerSlider 6.
What's new in LayerSlider 6?
Faster, Better, Prettier
Both the admin interface and front-end sliders load faster and perform better. This release has numerous bug fixes and improvements. So much actually, that we can't even write a complete list. The admin interface has also been redesigned a bit to provide familiar but much cleaner and easier controls.
Reworked Responsive Mode, New Slider Layouts, Device Dependent Layouts
The new responsive mode performs significantly better and in most cases it does not require any special configuration. LayerSlider now also have multiple new layout modes like full size, hero screne and full screen sliders. These will allow new use cases such as running slideshows on billboards. It's also possible to make different layouts for different devices (phones, tables, desktop).
New Transitions, Text Animations, Loop, Hover, Filters and a lot more
We've added lots of new transition options, which greatly extends the capabilities of your slideshows. You can now create chainable multi-step animations enhanced with stylish text transitions and interactive hover animations. There's also hidden surprises like the much requested Ken Burns effect, 3D parallax effect, and our new "play by scroll" feature. Oh, and don't forget to try out filters, which can be used to apply blur, sepia, grayscale etc. effects to your layers among many other.
Static Layers
Layers can now enter and leave on any slide. You can easily build more complex animations where layers persist across multiple slides. Or just use it as an "always on top" feature.
Undo and Redo
Web apps usually don't have controls to undo unwanted/accidental changes. LayerSlider now has. And it's even preserved for later use, whenever you need it.
Multi-selection, Resize, Rulers + Guides
Do you ever wanted to move around multiple layers and once? LayerSlider 6 now supports multiple selection, which allows you altering groups of layers seamlessly. With rulers and keyboard shortcuts, you can now move/resize/etc your layers with precision. There's also Guides and a snap to feature built in.
Keyboard shortcuts & Popout Editor
The slider builder interface can now be controlled by keyboard shortcuts. These shortcuts also introduces a lot of new features, like editing layers content right in the preview area or copying and pasting layers across slides and sliders. We've also introduced the Popout Editor, which transforms the layer options area into a floating window that can be resized and placed wherever you want. This makes it extremely easy to edit everything in one place, without the need to scroll up and down constantly.
Image Editor
With the help of Adobe's Creative SDK, LayerSlider 6 now has a built-in image editor. You can perform common tasks like resizing, cropping, rotating images, as well as photo retouching, adding frames, text, effects, stickers and a lot more. It's like a mini-Photoshop.
And a lot more ...
There's way more new features and improvement that we can list here: scheduled sliders, retina-ready, serving dynamically scaled images to reduce data usage and speed up page loads on mobile devices, redesigned transition builder with import feature, continuous live previews, new interactive timeline, reworked multimedia layer support with custom video poster and controls, custom HTML attributes, drag 'n' drop image upload, smart links, copy & paste layer styles and transition settings, named slides, new slider/slide background settings, auto-fit zoom, align layers feature.
The number of new features almost never end, but this list must. :)
The future of LayerSlider
LayerSlider 6 is just the beginning of our awesome new ideas. One of the main goals was to completely rebuild the plugin architecture and modernize its core. This allows us to implement new features way more faster and improve upon existing functionality with an easily maintainable code base. Beyond the predictable feature updates like the complete overhaul of skins, dynamic contents, etc (which will arrive very soon); we already have an experimental offline slider editor and preliminary support for LayerSlider extensions. This later one will soon be available for anyone to extend the plugins capabilities.
Previous versions
Changes in version 5.6.10
Added LayerSlider 6 beta program signup notice
Fixed some minor cosmetic issues under WP 4.6
Changes in version 5.6.9
Embedded YouTube videos are now always using HTTPS protocol
Fixed a compatibility issue with jQuery 3.0
Fixed a PHP error that affected some users on front-end pages
Changes in version 5.6.8
Improved image preload under IE and Edge browsers
Changes in version 5.6.7
Fixed image preload issues
WPML implementation fixes to properly generate URLs with language code
Fixed 'headers already sent' PHP warning that affected some users
Removed deprecated get_currentuserinfo() WP function call
Changes in version 5.6.6
Our sites and services now utilize SSL, providing LayerSlider updates and other assets over a secure connection
Various fixes for HTTPS sites
Further security updates
Other minor fixes
Changes in version 5.6.5
Optimized images with reduced file size
Auto-Updates fixes and enhancements
Fixed Google Fonts saving issues
Fixed Google Fonts 'Load only on admin interface' option
Fixed YouTube embeds with privacy-enhanced mode enabled
Fixed a potential WPML-related PHP debug message
Fixed potential security vulnerabilities
Changes in version 5.6.4
Fixed Console API calls
Fixed some YouTube playback issues
Fixed broken 'use post image' option
Fixed 'Add Media' button when inserting a video/audio
Fixed a PHP debug message that appeared in some cases
Fixed an issue that broke the Slider Builder in rare cases
Fixed saving issue in Troubleshooting & Advanced Settings section that affected some users
Quick fixes to support Right-to-Left (RTL) languages. Further improvements will arrive in future versions.
Changes in version 5.6.3
General bug fixes and stability improvements.
Changes in version 5.6.2
Added "Use slider markup caching" option to advanced settings
Added "Download latest version manually" option to the Auto-Updates feature
The "Concatenate output" option is now disabled by default
The "Include scripts in the footer" option will now move all inline scripts to the footer as well
This will also fix other potential JS errors, such as when jQuery is moved to the footer
Fixed issues with enabled caching when the same slider is inserted on a page repeatedly
Fixed the "Conditional script loading" option, which caused sliders to not render properly under WP 4.3
Changes in version 5.6.1
Fixed saving certain options in Slider Settings
Fixed Word Wrap option in live preview
Changes in version 5.6.0
Huge performance boost:
Our Slider Builder interface loads and works drastically faster, while it uses considerably less resources on both the server and client-side. The amount of content you add to sliders no longer has an impact on performance, the editor should always be fast and responsive. This also fixes the memory limit and execution time issues on servers with limited resources.
Caching slider markup:
LayerSlider now uses its own caching mechanism to spare your server from unnecessary load. Most installations support memory caching, which provides instant access to your sliders based on visiting frequency. This means that a slider on your front-page could stay in memory for improved speed, but another one in a sub-page might fall back to regular disk cache to free up resources for the content matters the most.
Minor interface changes:
We made a minor interface change in the list of layers, which you hopefully find familiar. Hiding/locking layers now has a permanent effect. The layer settings section has been placed closer to the preview, so you need to scroll less.
New features:
Added bulk slide creation when selecting multiple images
The slider builder now restores previous editing sessions (i.e. active slide/layer, etc)
You can now easily select overlapped layers just by right-clicking on them in Preview
Other changes:
Updated GreenSock library for improved animation performance (especially on mobile)
Removed old media uploader support (pre-WP 3.5)
Fixed issues:
Fixed WordPress debug message under WP 4.3.
Fixed Screen Options button under WP 4.3.
Fixed several issues with embedded YouTube videos
Fixed issues when adding images from external URL
Fixed duplicating sliders with really long names
Fixed glitches when reordering layers
Fixed the layerslider_slider_markup filter hook
Fixed losing transition and layer style settings when saving (magic_quotes)
Fixed memory limit and execution time issues on servers with limited resources
Fixed timeline
Changes in version 5.5.1
Fixed WordPress debug message under WP 4.3.
Changes in version 5.5.0
Added back the auto-generated excerpts based on the native WP behavior:
Manually entered excerpts will remain "as is", without any modification or formatting. Custom HTML code is allowed.
Auto-generated excerpts have all shortcodes and HTML tags removed and they will appear as plain text.
Auto-generated excerpts will be trimmed down to 55 words. The [...] "hellip" sign will be appended at the end if the text exceeds this limitation.
Custom word count used by themes will be automatically applied in your sliders. Developers can override it by using filter hooks.
Auto-generated excerpts respect WP's <!--more--> tag, so you can easily split your content at the point you want.
Text length limitation will remain as an optional feature on a per layer basis.
Providing update notification for unauthorized sites as well
The settings boxes below your list of sliders has been grouped under a tabbed interface
Significantly improved YouTube video playback behavior
Fixed an issue that prevented some users to properly import our sample sliders
Fixed update installation from LayerSlider's admin interface
Fixed 'yourLogo style' option in Slider Settings
Fixed an issue that caused appearance issues for a few users in Slider Settings
Prevent the LS Help menu entry showing up on non-LayerSlider admin pages
Fixed the 'Enjoy using LayerSlider?' share sheet appearing in cases when it should not
Extended developer documentation with improved examples
Updated End-User documentation
Changes in version 5.4.0
Entirely new documentation
Added option to import sliders without their images
Slide backgrounds now parse shortcodes when used in "Enter URL"
The LayerSlider shortcode can now accept filtering options
Improved compatibility with image preloaders
Improved compatibility with certain plugins/themes
Fixed several issues with dynamic layers
Fixed issues when the same slider was inserted on a page in multiple times
Fixed TinyMCE editor tool to properly work with multiple instances on page
Fixed some potential JS errors that could happen in some very rare cases
YouTube video thumbnails have not been loaded until the previous slide
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
Support
Before reporting an issue
There are some common practices you should try before reporting an issue:
Check System Status
Select LayerSlider -> Options from your WordPress admin sidebar, then click on the System Status button. The page displayed there is intended to help you identifying common issues and to display relevant debug information about your site. Always try the recommendations provided by this menu (if any) before reporting an issue.
Always use the latest software versions
This includes your WordPress installation, LayerSlider, the WP theme you're using and any other plugin installed on your site. Third party plugins and themes (not hosted on wordpress.org) may not update automatically. Taking care to keep everything up-to-date can spare you from a lot of problems and frustration.
Common debugging techniques
Issues could be related to other plugins/themes and their settings. We often ask our customers to temporarily disable other plugins and switch to one of the default WP themes. This way we can quickly eliminate external and 3rd party factors. If it solves the problem, you can find which item caused the trouble by re-enabling them one-by-one and watching when the issue comes back.
Troubleshooting WordPress in 60 Seconds
WordPress site problems can have many causes, but even so, a few basic steps will help you catch most of them.
Settings, server environment, online assets
A lot of times issues occur due to incorrect settings or other environmental factors. It's always a good idea to quickly review your settings and try to find a solution in the documentation or online by searching through our ticket system for similar cases. Experiencing difficulties with saving your sliders are usually server configuration issues and it's recommended to ask your server hosting to look into these issues. They have the tools that nobody else has like diagnostic softwares, logs, etc and only they can access certain settings and configuration files. Naturally, we're here to help you and you can open a ticket at any time.
How to contact us
Support
Our dedicated team of professionals can only provide hand-on support on Ticksy, our ticketing system. Please open a support ticket if you have questions regarding your purchased product or if you need help solving issues that you are experiencing.
A collection of legal document covering the legal aspects of our products and services. Please review them to fully understand the terms, conditions, and policies upon which our products and services are provided.