This documentation is for LayerSlider 7.

About LayerSlider

One Product. Infinite Possibilities. Being much more than a WordPress responsive slider plugin, LayerSlider is the ultimate solution for creating beautiful animations, breathtaking designs and rich content for your website. For more information about LayerSlider, please find the full list of features on LayerSlider's home page.

Legal & licensing information

Page Description
Help A collection of pages that cover most topics and questions that customers are often looking for.
Frequent Questions Frequently asked questions about orders, payment, licensing, product support, and other common topics.
Licensing The detailed license terms and conditions that govern what you can and cannot do with your purchased products and any supplementary services and materials.
Terms of Use The legal terms and conditions on which our products and services are provided.
Privacy Policy 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.
GDPR The General Data Protection Regulation (GDPR) is a regulation in EU law on data protection and privacy for all individuals within the European Union.
Support Policy This policy outlines what you can expect from our team of support staff. What services we provide, our average response time, support period, etc.
Refund Policy 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.

Projects

Project Homepage Motto
Air Datepicker t1m0n.name Lightweight cross-browser jQuery datepicker.
Angle Input github.com Angle input for jQuery, React, and vanilla JavaScript.
CodeMirror codemirror.net A versatile text editor implemented in JavaScript for the browser.
Dashicons github.com Dashicons is the official icon font of the WordPress admin as of 3.8.
Dindent github.com HTML indentation library for development and testing.
Font Awesome fontawesome.io The iconic font and CSS toolkit.
Google Fonts API google.com Hundreds of free, open-source fonts optimized for the web.
GreenSock greensock.com Ultra high-performance, professional-grade animation for the modern web.
html2canvas hertzen.com Screenshots with JavaScript.
iGuider codecanyon.com Product Tour - Interactive Walkthroughs - Website step by step Guide.
Ionicons ionic.io Open source icons. Lovingly hand-crafted.
jQuery jquery.com The Write Less, Do More, JavaScript Library.
Line Awesome icons8.com Swap Font Awesome for modern line icons in one line of code.
Material Icons google.com Material Design icons by Google.
MiniColors github.com A tiny color picker built on jQuery.
Popper popper.js.org Tooltip & popover positioning engine.
Pixie - Image Editor codecanyon.net A photo editor application that works on mobile and desktop.
Web Font Loader github.com Web Font Loader gives you added control when using linked fonts via @font-face

Royalty-free multimedia sources

Our importable templates are using the following services for royalty-free multimedia content. Assets from our templates can generally be re-used as long as you abide the licensing rules of these services. Please take care to not use identifiable people or brands in a way that they might find offensive, and avoid misleading associations with them.

Site Motto
Freepik Free Vectors, Stock Photos & PSD Downloads
Pexels Free Stock Photos, Royalty Free Stock Images & Copyright Free Pictures
Pixabay Stunning free images & royalty free stock
Unsplash Beautiful Free Images & Pictures

Installation

Locate the install file

The install file have a name something like layersliderwp-x.x.x.installable.zip. The installable part is the keyword that you should look for.

A recently downloaded version will be the install file itself and you can skip right to the actual installation process.

Older versions, on the other hand, was packaged differently and you may have to first unpack the main ZIP file, then find the install file inside. This was because the main plugin package contained other useful assets besides the install file like the documentation, examples and source files. These are now accessible from our website and new downloads will get you a combined package that can be uploaded to WordPress right away.

Installation through the WP admin interface

  1. Locate the installable file described in the above section.
  2. On your WordPress admin area navigate to PluginsAdd new, then press the Upload Plugin button on the top of the page.
  3. Choose the installable ZIP file mentioned previously, then hit the Install Now button.
  4. WordPress might ask you to enter your FTP login credentials. Click on Proceed when you've finished.
  5. The plugin is now installed, click on the Activate Plugin button.
  6. A new menu entry called LayerSlider 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

  1. Locate the installable ZIP file described at the top of this page, then unpack it.
  2. Open your favorite FTP application and connect to your server. Navigate to the "/wp-content/plugins/" folder.
  3. Copy over the "LayerSlider" folder extracted from the installable ZIP file.
  4. Navigate to the Plugins page on your WordPress admin area and click the Activate button below LayerSlider.
  5. A menu entry called LayerSlider 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. Older LayerSlider versions was packaged differently, and you might need to 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 above.
  • 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 projects 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.

License registration

Why to register?

Register your license to receive premium benefits like:

Automatic Updates Always receive the latest LayerSlider version.
Premium Project Templates Access more templates to get started with projects.
Popups With the power of LayerSlider, you can have the nicest popups to get your visitors’ attention.
Exclusive Features Unlock exclusive and early-access features.
Add-Ons & Additional Content Access to special effects, features, and additional ready-to-use content.
Product Support Direct help from our Support Team.

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 offer 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 register my license?

You can find the Register Your License section below your list of projects on the main LayerSlider screen. After entering your license key, press the Register License button and you're set.

Product Activation
The location of the license registration box on the main LayerSlider screen.

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 deregistering licenses, 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.

How can I transfer licenses or deactivate past sites?

If you still have access to the site

Just click on the DEREGISTER LICENSE button in the license registration box and you are all set. The license key that you've used for that site will be available to be registered elsewhere.

Site deactivation
Deregistering a license

If you no longer have access to the site

We've made an account management site where you can log in and list all your licenses and sites where you've registered LayerSlider. From there, you will be able to remotely deregister licenses to use elsewhere. 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 you 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 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 LayerSlider 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 → → System Status screen to identify potential issues you might have on your site.

Updating the plugin

Auto-Updates

After performing License registration, 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 LayerSlider's main admin screen about new releases.

To access early-access versions, select the beta release channel in the Plugin Updates box.

Purchase Code
Illustration of the Plugin Updates 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 projects 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. If you want to receive new releases as quickly as possible, please consider purchasing a LayerSlider license.

How to Update

Troubleshooting

  • Please note, WordPress checks for new updates periodically at certain times. Even if there is a new version available, it might not appear immediately after license registration.
  • Our auto-update solution requires license registration and is only available for our direct customers as described in the Updating the plugin section.
  • If you keep receiving 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.
  • 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 projects a bit. If you experience any unwanted change, it's always a good idea to check the settings of your projects as there are probably new options to control these changes.

Managing projects

Action Description
Add new project Press the Add New Project button located on the top of the LayerSlider admin page. The plugin should navigate to the project editor interface after you've entered the name of your new project.
Duplicating projects Hover over your project and click on the icon to reveal project actions, then select the Duplicate option. This will create an identical copy of the corresponding project. This feature is useful if you would like to experiment on a project without changing the original. You can also use this feature to have a base when you want to build projects with similar settings.
Hiding projects Hover over your project and click on the icon to reveal project actions, then select the Hide option. This will hide the project from all pages and on the admin interface, but a copy in your database will be preserved as a backup if you ever want to restore it.
Deleting projects Hover over your project and click on the icon to reveal project actions, then select the Delete option. This will permanently delete the project that cannot be undone.
Restoring projects Above your list of projects, select Show hidden items. This will list all your hidden projects. To restore a hidden item, hover over the project and click on the icon to reveal project actions, then select the Unhide option. This will list the project on the admin area as well as restore it on front-end pages if it's embedded.
Merging projects If you have slides in different projects that you would like to use together, you can merge them. Select multiple projects in the list, then choose the MERGE AS NEW option from the bar above.
Grouping projects You can group projects together essentially creating a folder for them. Just select multiple projects, then choose the GROUP option from the bar above.
Exporting projects Hover over your project and click on the icon to reveal project actions, then select the Export option. You can also select multiple projects and export them together by selecting the Export option from the bar above.
Pagination settings You can set the number of projects displayed on the page at the bottom of the project list. You can navigate between pages from here as well.

Project Groups

LayerSlider offers you an easy way to group project. This feature allows you to basically have folders for your works. You can create groups by dragging a project and dropping it on another. There's also a new bulk action to group selected projects together when you select multiple items. You can remove projects from a group with the same principle: just start dragging a project, and drop it on the remove tile.

When you import multiple projects, either with a ZIP file or by downloading website templates, they will be automatically grouped together. The Clear & Remove Group button allows you to immediately break up the grouping and have all items moved outside of the group. This won't touch your projects and they will remain available on the main grid.

Importing templates

Press the Browse Templates button located above your list of project, to reveal the LayerSlider Template screen.

Importing templates will allow you to see our settings and get familiar with the editor. You can find both simple and complex projects to discover LayerSlider's capabilities. You can freely experiment on these projects without worrying since you can always import a new, untouched copy.

Premium project templates are particularly useful as a starting point for your future projects. We're releasing and updating templates regularly. Our goal is to cover most use cases, whether you need a project for personal use (such as slideshow for family photos), or you want to use it on your business website, or even on digital billboards. Our selection includes great examples for retail shops as well as templates for creative work.

Illustration of the "Browse Templates" button

Troubleshooting

  • Check the LayerSlider → → System Status screen to identify potential issues you might have on your site.
  • Importing a template will add its images to your WP Media Library. Larger templates 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 templates with many images could also consume considerably more memory during the import. Most servers should not have any issue with it, but in some cases you might experience unexpected issues like partially imported templates.
  • 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 projects

Importing

At the top of the LayerSlider home screen press the Import Project 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.

Illustration of the Import Project button

Exporting projects

Right click on projects or hover over a project and click on the icon to reveal project 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 projects by selecting them with the checkbox when hovering over them, then choose the Export option from the above selection bar. Please note, selecting multiple projects with images can drastically increase the exported file size and could lead to import issues on sites with certain server settings.

Illustration of exporting a project

Troubleshooting

  • Check the LayerSlider → → System Status screen to identify potential issues you might have on your site.
  • Importing a project will add its images to your WP Media Library. Larger projects 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 projects with many images could also consume considerably more memory during the import. Most servers should not have any issue with larger projects, but in some cases you might experience unexpected issues like partially imported projects.
  • 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.

Plugin Settings

You can open the Plugin Settings from LayerSlider’s main screen with the icon.

Illustration of the Plugin Settings button

Permissions

After opening Plugin Settings, you can find the permission options under the General tab. From there you can easily select any user role. Members of the selected role will have permission to change plugin settings and manage your projects. 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.

Using Google Fonts

You can choose from more than a thousand of beautiful typefaces under the Google Fonts tab of Plugin Settings. Fonts selected here will be loaded globally, even if you don't use them. We recommend that you select Google Fonts in the Project Editor, so each project can load only the fonts they need. This ensured performance and makes editing projects more convenient.

Illustration of the Google Fonts section

Advanced settings

The Plugin Settings window also allows you to set more advanced options under the Performance, Troubleshooting, and Miscellaneous tab. We recommend that you only edit options under the Performance sections. Options under the Troubleshooting tab should only be changed if you experience an issue with the plugin.

Please note, the Troubleshooting 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 → → System Status. 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, and the option to erase all plugin data if you want to uninstall LayerSlider. To find out more about using System Status, please follow the on-screen instructions when navigating to its page on the admin interface.

Illustration of System Status

Getting started with the project editor

Since LayerSlider is a powerful tool that allows you building professional grade animated materials, its project editor 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:

  • Guided tour: When you open the editor for the first time, a guided tour will be welcoming you and offer to walk you through the interface. We highly recommend taking this brief introduction. It's only a couple of minutes, and it can be really helpful navigating the different sections of the editor interface.
  • Tooltip & Smart Help: Many options on the interface offer more information and examples. When you move your mouse cursor over option fields, they often show a tooltip or a + sign. Clicking on the + sign will open a panel where you find helpful information describing what that option does, examples, as well as additional features. For instance, the + sign of the Font Family field lets you choose from more than a thousand beautiful typefaces provided by Google Fonts.
  • 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.
  • Explore templates: Discussed under Getting Started / Importing templates, you can see how we built our demos, and which settings we used to achieve certain animations. You can find both simple and complex projects 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 templates can also be the starting point of your projects since we're focusing on covering most use cases.

Project settings

This is the where LayerSlider automatically navigates you after creating a new project. You can also open this window at any time from the toolbar at the top.

On this screen you can set common settings like the size of the project canvas, and customize its appearance or features in the other sub-sections. The interface already describes every option in-editor, so we don't list them here. Please review them carefully, so you can customize your project behavior and appearance in the way you like.

Illustration of opening Project Settings from editor toolbar.
Illustration of Project Settings

Slide defaults

When you will work with slides and layers, you may notice that some option can inherit values from higher up in the hierarchy. Layers can inherit option values from slides, and in the same manner, slides can inherit values from project-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 Project 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 as well as individually.

Illustration of the default slide options section

Advanced settings

The Project Settings window contains hidden options as well, 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 at the bottom left corner. Advanced options are marked with a flag icon and they are scattered trough the different sections you can access from the sidebar.

Illustration of displaying advanced project settings

Adding slides

You can access the list of slides in your project from the toolbar located at the top of the editor.

Illustration of accessing slides

Managing slides

Feature Description
Naming slides Just click into the text field under any slide and enter your desired name.
Re-ordering slides You can grab slides by their preview image and move them around to order them as desired.
Duplicate slides You can right click on the preview image of any slide or press their icon when you move your mouse cursor over them. Selecting the DUPLICATE SLIDE slide option will make a new copy of that 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.
Publish / Unpublish slides Right click on or open the menu of a slide to access the UNPUBLISH SLIDE or PUBLISH SLIDE options. Making an slide unpublished means that it will not be present in embedded projects on front-end pages. Your visitors will not see that slide. However, it remains available in the editor, so you can make changes or publish it later as you see fit.
Removing slides Right click on or open the menu of a slide to access the REMOVE SLIDE option. Removing a slide will be permanently remove it. Both from the editor and on front-end pages.
Generate thumbnail Right click on or open the menu of a slide to access the GENERATE THUMBNAIL option. This will capture your preview area and set the image as your slide thumbnail. Useful to have nice preview images when you display thumbnails in the project's navigation area. It's also used to have nice preview image in the list of your projects on the main LayerSlider admin screen.

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 color or image of slides since web standards don't offer a way to "capture" all contents within a project. 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. 3D transitions are supported on all modern web browsers.

Linking slides

Linking a slide will make its entire surface clickable. You can also link individual layers, for example, a button or any other smaller control. Based on your settings, layers can be either above or below of the slide link, making it possible to link both.

Illustration of the slide linking section

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 are generated automatically, and they will 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.

The Use Dynamic Post URL button can be used to have a link coming from a dynamic content source that you can set up under the Content Sources menu.

Deeplink

A deeplink is a slide alias name you can use in your URLs with a hash tag. It's used so that 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.

Workspace features

The workspace (i.e.: the preview area) has many hidden features, which can drastically improve your productivity.

Illustration of the editor workspace area

Context menus

Feature Description
Workspace settings Right-click outside of the preview area to bring up the workspace settings panel. This allows you to customized displayed interface elements such as rulers, guides, or the info panel. You can also change the workspace padding to control the size of the overscroll area.
Layer actions Right-click inside the preview area to display the context menu for layer actions. There are a lot of options to select, add, remove, or align layers, among others.
Other There are a lot of places where you can right-click to bring up a context menu relevant to the interface item you've clicked on. You can right-click on projects, slides, the right sidebar, etc.

Workspace toolbar

You can find the workspace toolbar at the top of the project editor.

Feature Description
Project preview The project preview is where you can see your entire work coming to live. It displays sliders and popups exactly the way they would look and behave when embedded on front-end pages.
Slide preview The slide preview will instantly start playback of the edited slide in-editor. It can be used to preview your animations quickly and easily. You can press the key as a shortcut to instantly start/stop the slide preview. Slide preview will not automatically advance to other slides, and it will not show your skin an navigation options.
Layer preview Layer preview will only animate a single selected layer. It's a continuous looping playback while you can edit its properties on the fly. You don't have to exit the layer preview, changes are reflected real-time. Simultaneously previewing and editing layers can be a tremendous help to explore what each option does and how it affects layer animations.
Timeline A color-coded timeline view is accessible under the Preview menu item where you can review all layer transitions and their timings.
Zoom Grab the zoom slider to quickly resize your project and workspace to the size you feel right. This feature can be particularly useful when you're working with a larger project canvas on smaller screens, or want to zoom in to position items in a pixel-perfect manner. It comes with two quick buttons: original size and zoom to fit.
History The list of recent changes in your project that you can undo or redo.
Device view You can control each layer individually whether they should show up on a particular device or not. This is useful to build different layouts of the same project for smaller screens by dynamically hiding and showing up different layers. Click on the device you want to preview.

Hidden features

Feature Description
Upload images & SVG files You can grab images and SVG files from your desktop and drop them onto the editor to instantly upload them. This will also position them to the exact place where you've released dropped them.
Multiple selection 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 key and clicking on the corresponding layers in the preview area.
Moving layers Grab layers and move them freely wherever you like. Naturally, you can move more than one layer at once by using multiple selection. By holding the 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 magnetically snap to guides. Use them to position layers in the same line with ease.
Quick edit layers Select a layer in the preview, then press enter or double click on it to switch into quick edit mode. For textual layers, this will allow you to directly type in the layer contents. For other types of layers it will bring up their corresponding options like opening the Icon Library or Media Library.
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 the layer context menu mentioned previous offers you the "Overlapping layers" option when there are multiple layers underneath your mouse cursor. From that list, you can easily choose the exact layer you would like to work with.
Keyboard shortcuts LayerSlider offers many shortcuts to speed up your workflow. Please open the menu at the top right corner of the project editor, then select the KEYBOARD SHORTCUTS option to review all the available shortcuts.

Adding Layers

You can add new layers with the Add Layer button at the top of the layers list. A modal window will appear and prompt you to choose from the different kinds of layer types.

Layers list and Add Layer button

Managing layers

Feature Description
Renaming layers Making complex slides will require many layers. LayerSlider will automatically name your layers with any information it can use. In case you want to rename them, just double click on their name and a text field will appear.
Re-ordering layers You can drag and re-order layers by grabbing them on their preview area on the left side. The exact order can be particularly important when you work with overlapping layers as it controls which layer should be on top of the other. Layers at the top of the list will cover anything below them.
Locking layers Locking a layer with the icon will disable any interactive features in the workspace just as selecting, moving, resizing them.
Hiding layers Hiding a layer with the icon will make it invisible both in the preview 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 embedded projects on your front-end pages.
Duplicating layers Clicking on the icon will make an identical copy of the selected layer.
Removing layers You can remove layers with icon.

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 simple text layers. You can enter HTML tags for formatting, but for a complex HTML source code you should use the dedicated HTML layer type.
Video / Audio This layer type is preserved for multimedia contents. Choose it if you want to embed YouTube, Vimeo or HTML5 video/audio.
Button Choose from a wide selection of pre-formatted gorgeous button presets.
Shape Use the shape layer if you want to display circles, ovals, rectangles, triangles, lines, or other types of shapes.
Icon LayerSlider comes with thousands of icons you can choose from.
Object A library for commonly used assets including images, video, audio, SVG files. You can also use it to embed your own SVGs.
HTML You should choose this type of layer to use custom HTML content or WordPress shortcodes.
Dynamic Layer Select this type of layer if you want to use content pulled dynamically from your WP posts, pages, and other sources. See Dynamic Layers section for more information.
Import Layer You can paste layers from any projects without even leaving the editor. Useful if you want to re-use something from your other works.

Device support

It's possible to build multiple layouts for different devices in the same project by dynamically showing and hiding layers. With the Toggle Device Visibility buttons, you can choose on which devices should the currently selected layer appear.

Choosing devices for layers to 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, video poster 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 content. For YouTube and Vimeo videos, you can enter their URL or paste the embed code from their page into the appropriate 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 audio and video formats. 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 key and selecting multiple items from your WordPress Media Library.

Other than YouTube, Vimeo, and HTML 5 media players, we do not currently have dedicated support. However, you can embed multimedia from other sources and with different players, but these might have reduced functionally. For example, when they are being played, they might not automatically pause the slideshow. Experienced users with web development skills can use the LayerSlider API to detect events and run custom code to control 3rd party media players if needed.

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 editor preview doesn't show the result you would expect.

Using interactive content highly relying on Javascript can be problematic, and might not work properly in some cases. Since we cannot workaround every possible issue in someone else's code, it's possible that some shortcodes and embed will be rendered incorrectly.

It's 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 need to be responsive to be in sync with the project layout changes.

Layer Styles

Under the STYLE menu of your layers, you can find commonly used formatting options to customize the appearance of your layers. This is where you can set fonts, alignment, borders, backgrounds, effects, and so on.

This is also where you can set the position of layers with the Left and Top options. While you can use the visual editor to move layers around by dragging them, it's often better to fine-tune them here for a pixel-perfect result.

If you ever need help with the styling options, hover over an option field and click on the + sign. It will open a panel describing what that option does, giving you examples and common values, and in some cases they also provide extra functionality. For instance, the + sign of the Font Family field lets you choose from more than a thousand beautiful typefaces provided by Google Fonts.

Illustration of layer style options

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 the Getting started section.

There are multiple types of transitions. You can select which one you would like to edit from the dropdown list. In the dropdown list, you can also see check marks indicating which types of transitions are in active use. You can enable or disable the different types of transitions with the checkbox underneath the dropdown list.

Also under the dropdown, you can find an animated illustration that plays a preview when you move your mouse cursor over it. It provides you a description of that particular transition type as well.

Illustration of layer transition options

More importantly, most option fields will display a + sign when you move your mouse cursor over them. Clicking on the + sign will open a panel describing what each option does, giving you examples and common values, and in some cases they also provide extra functionality.

Illustration of the help panel of option fields

Linking layers

You can link a layer under its LINK menu. You can enter a URL and set whether you want to open it on the current page or in a new tab/window.

You can also 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

The Use Dynamic Post URL button can be used to have a link coming from a dynamic content source that you can set up under the SLIDE → CONTENT SOURCES menu.

Illustration of linking layers

Layer actions

Layer actions offer you a way to switch slides, control the slideshow and media playback, scroll on the page, and more. You can add as many actions as you want. Each layer action has a Trigger option, where you can select when does the action should be performed. The Delay option is used to delay performing actions by the given number of milliseconds. Some layer actions has more options relevant to them specifically.

Illustration of layer actions.

Layer attributes

Applying commonly used attributes (such as a unique ID or classes) on layers under the ATTRIBUTES menu. These settings are made for users with some level of web development experience to further customize layers or have integrations with 3rd party plugins.

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.

Illustration of layer attributes

Image editor

LayerSlider comes with an image editor feature built-in. 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.

Right-click on image pickers or press the button, then select the IMAGE EDITOR option to open the image editor.

Illustration of the image editor button
Illustration of the image editor

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 grab the playhead and move it back and forth to play segments at your own pace. You can access the timeline feature from the top toolbar of the editor under the Preview menu.

Illustration of the slide timeline

Dynamic layers from posts

You can pull individual post information by using post placeholders. These work 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

Illustration of dynamic layer settings

Using post filters

You can target WP posts or pages to pull information from by clicking on the Configure post options button. LayerSlider supports custom post types, tags, categories, and taxonimies to find any kind of custom content that themes and plugins may use. In the opened modal 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 projects, but you can select items from the results on a per slide basis. 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 projects 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 projects. 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 layers 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 projects

How to translate the admin user interface?

  1. 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.

  2. Start translating

    Open the default LayerSlider-en_US.pot file from your "/wp-content/plugins/LayerSlider/assets/locales/" folder. When you save your work PoEdit will generate you a .MO file which will be needed to apply your work.

  3. 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.

  4. Apply your localization

    Copy your newly created .PO and .MO files into the "/wp-content/plugins/LayerSlider/assets/locales/" folder. WordPress should use them immediately if you named your files properly and you've set the correct language for your WordPress user account.

Creating multilingual projects with qTranslate

qTranslate (and its successor, qTranslate X) is the one of the easiest way to create multilingual projects 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 projects:

[: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 markup caching" option under the LayerSlider → → Plugin Settings -> Performance tab. Due to technical difficulties, it's not possible to dynamically show up multilingual content in a cached copy. Your projects 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 projects:

LayerSlider registers translatable strings when you save your work. If you want to translate a previously created project, 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 project 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 embedded projects on front-end pages. Whenever you make a change in your projects, the affected strings will be marked as "Translation needs update" in WPML's String Translation module.

The WPML team was kind enough to provide an official step-by-step guide of translating LayerSlider projects. It explains and illustrates every step of the way in detail. Click here to read their guide.

Don't forget to disable the "Use markup caching" option under the LayerSlider → → Plugin Settings -> Performance tab. Due to technical difficulties, it's not possible to dynamically show up multilingual content in a cached copy. Your projects could always show the same language string if you keep caching enabled.

Project revisions

Have a peace of mind knowing that your project 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 project 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. Project 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.

Learn More

Illustration of the Revisions button.

Smart Operations

Smart Operations is a way to bulk edit layer properties. Instead of selecting and editing each layer individually, it allows you to perform actions in a single step. Moreover, it does this dynamically based on simple math formulas.

LayerSlider already has multiple selection mode, which allows you to set the same value on multiple layers at once. Smart Operations is an evolutionary step of the same concept, but it goes beyond the "same value" part.

Imagine a scenario, where you already have a project with a sequence of animations taking place. Then you might want to add another layer that should appear at the beginning before everything else. Now, you're in a situation where you need to shift all layer timings with a given amount. It's a time consuming task that can repeat itself quite frequently when you're doing creative work and experimentation. With Smart Operation, you can enter +500 and all the timing of your selected layers are shifted with 500 milliseconds relative to their own distinct value.

You can use Smart Operations not just for timings, but setting sizes, positions, transformations, etc. Imagine another scenario where layer properties are built on each other and change with every new item in the sequence. Smart Operations allows you to set an incrementally changing value in a single step. The bellow illustration shows an example where we had identical layers and resized them with the ++64 formula. You can learn more about operators like ++ below, but it basically changed each layers’ size with 64 pixels increments. 64 -> 128 -> 192 -> 256 -> 320. All in a single step. However, these are simple examples, you can be much more creative with Smart Operations.

A Smart Operation example

Some useful tips

Before you dive into Smart Operations, there are some things you should know about that might work differently than you expect.

Order of operations: Regardless of your used operators, we're always evaluating formulas from left to right without regards of operator precedence.
Evaluation & starting value: The entered math expressions are always applied to each layer individually. Thus when layers have a different starting value, the applied operation will give you different results. This is what you'll likely want in most cases: shift layers relative to the value they already have. However, since you can enter any valid math expression, you may also control their starting value. For example, instead of entering ++500, you can also use the 0 ++500 formula, so all your math expressions evaluates from the same starting value. In this example, it's the number 0, but it can be any number.

Simple operators

Simple operators are the four basic mathematical operations: Addition, subtraction, multiplication, division.

In these examples we use different values to emphasize that the entered math expression are always applied to each layer individually. Thus when layers have a different starting value, the applied operation will give you different results.
+500
1000 1500
1250 1750
1500 2000
-500
1000 500
1250 750
1500 1000
*2
1000 2000
1250 2500
1500 3000
/2
1000 500
1250 625
1500 750

Double operators

Double operators work similarly to simple operators. The two main differences are:

  • Skips the first item in the sequence.
  • The performed operations are incrementally changed at each step.

So the ++10 operator will leave the first value unchanged, than adds 10 to the second layer's value, then 20 to the third, 30 to the fourth, and so on.

In the examples below, we pretend that each selected layer has the same starting value, so you can easily follow how the sequence evolves through multiple steps.
++10
100 100
100 110
100 120
100 130
--10
100 100
100 90
100 80
100 80
+*10
100 100
100 110
100 120
100 140
-*10
100 100
100 90
100 80
100 60
**2
100 100
100 200
100 400
100 800
//2
100 100
100 50
100 25
100 12.5
*+2
100 100
100 200
100 400
100 600
/+2
100 100
100 50
100 25
100 16.66

Triple operators

Triple operators work exactly like double operators, but they are also applied to the first item in the sequence.

In the examples below, we pretend that each selected layer has the same starting value, so you can easily follow how the sequence evolves through multiple steps.
+++10
100 110
100 120
100 130
100 140
---10
100 90
100 80
100 70
100 60
++*10
100 110
100 120
100 140
100 180
--*10
100 90
100 80
100 60
100 20
***2
100 200
100 400
100 800
100 1600
///2
100 500
100 250
100 125
100 62.5
**+2
100 200
100 400
100 600
100 800
//+2
100 50
100 25
100 16.66
100 12.5

Version 7 migration guide

While LayerSlider 7's user interface is visually very different from previous versions, however, it's structured in a similar manner if you know where to look for things. The below illustration and legend shows the key differences

Also, when you first open the new project editor, LayerSlider will prompt you with a welcome guide offering to walk you through the new interface. It only takes roughly 3 minutes, and we recommend you take that product tour.

Locating the LayerSlider shortcode
Key changes in LayerSlider 7's project editor.
  1. Project settings: Formerly known as Slider Settings, where you can set the layout, slideshow, and other project-level options.
  2. Slides list: Your slides can now be accessed by a dropdown panel, so they are not in the way to make room for the project canvas.
  3. Slide options: In the previous version, the slide option section was above the project canvas. The same options can now be accessed from the sidebar by selecting the SLIDE tab at the top.
  4. Layer options: In earlier versions, layer settings were below the project canvas. They have been moved to the sidebar that's very similar to how they looked with the old Popout Editor layout. You can reach them by selecting the LAYERS tab at the top of the sidebar.
  5. Save & Publish: In LayerSlider 7, you can now save drafts without making them public on front-end pages. The save button creates a draft that's only accessible in the editor. This enables you to freely edit and experiment on projects and publish the changes only when your work is ready. REMEMBER: Once you want to make your changes visible on front-end pages, you need to press the PUBLISH button, which also updates your draft to the most recent version.
  • BONUS: In earlier versions, we've referred to Projects as Sliders. Since LayerSlider enables you to make lots of different kinds of content that aren't necessarily a slider, we've decided to rename Sliders to Projects.

Method 1: Using shortcodes

Shortcodes are special text snippets, which you can paste into almost all places where you can enter text like the WordPress page and post editor. They will then automatically be 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 3rd party plugins (e.g. page builders in themes) can also accept LayerSlider shortcodes to add projects to your pages.

Each of your LayerSlider project has a unique shortcode. You can hover over a project in your list and click on the icon to reveal project actions, then select the Embed option to see its shortcode.

For advanced customization, you can add a filters attribute to your shortcode to control on which pages the project 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 projects to start with the specified slide, even if the project has different settings. This is particularly useful when you want to embed the same project in multiple times showing different slides. In the following example we're forcing the project to start with the second slide: [layerslider id="1" firstslide="2"]

You can override most project settings. Please read the Overriding settings section for more information.

Classic Editor helper utility

We've also added a small utility to the WordPress Classic Editor toolbar. It will display a modal window with your most recent projects to choose from. After selecting the project and changing the embed options as desired, press the "Insert into post" button to put the corresponding shortcode into the editor. See the illustrations below.

Locating the LayerSlider shortcode
Illustration of the Classic Editor tool to list and insert projects

Method 2: Gutenberg

Recent WordPress releases are now 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 includes a dedicated Gutenberg block, which you can use to easily insert projects into posts and pages. If you aren't familiar with Gutenberg yet, here's a quick tutorial:

  1. Click the + sign, then select the LayerSlider block from the Widgets category. You can also use the search feature to quickly find any block.
  2. 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.
  3. At this point the block is only a placeholder showing where the project would be displayed. Click on the Project Library button and select the project you want to insert into your post / page.
  4. That's it! You can now press the editor Publish / Update button to save your changes and the project will be at the right place on your front-end pages.

Additional details:

  • To change the project, you just need to select the LayerSlider block, then click on the "tiles" 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.
  • You can also quickly edit the embedded projects by pressing the "pencil" toolbar icon.

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: WordPress Widget

LayerSlider supports widgets, so you can add projects to your front-end pages with just a drag n' drop action. To do that, navigate to the Appearance menu on your left sidebar and select "Widgets". Grab the LayerSlider widget and drop it into one of your widget areas.

For more customization, you can enter custom filters in your widget settings to control on which pages the project 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 projects to start with the specified slide, even if the project has different settings. This is particularly useful when you want to embed the same project in multiple times showing different slides.

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 it for users without experience.

Inserting a project with the LayerSlider WP Widget
Inserting a project with the LayerSlider WP Widget.

Method 4: Elementor

Elementor is a free page builder that became very popular in recent years, and is loved by millions for its simplicity. We highly recommend to give Elementor a try as it can easily be your best and smoothest experience. LayerSlider has a dedicated Elementor widget, which comes all the features you would expect and more. For example – in Elementor's fashion – embedded projects are live and you can see a real-time preview of your site. You can also quick edit project without ever leaving Elementor. Changes made in projects are reflected in real-time.

If you aren't familiar with Elementor yet, here's a quick tutorial:

  • After installing Elementor, you just need to edit a page as you normally would. You'll notice the added "Edit with Elementor" button, which will launch the Elementor Editor.
  • In the Editor, you can search for the LayerSlider Widget with the search box at the top of the sidebar. Just start typing "layerslider".
  • Elementor automatically converts WordPress Widgets into Elementor Widgets, so you'll likely see multiple matches. Choose the one with the real LayerSlider logo (three overlapping layers). That's the dedicated and much more feature-rich widget you'd want to use.
  • Grab the widget and just drop at any place you see fit in the right side preview area. LayerSlider will immediately prompt you to select a project you want to embed.
  • That's it! You've successfully embedded a project to your page. Of course, there are customization options you can find on the left sidebar when selecting the LayerSlider widget.

Here's a quick video showing Elementor and the LayerSlider widget in action:

How-to: Using the LayerSlider Elementor widget

This video helps you get started using the
LayerSlider widget made for Elementor.

Method 5: Visual Composer (WPBakery)

Visual Composer, also known as WPBakery Page Builder, is yet another popular page builder solution. Visual Composer comes with its own LayerSlider element out of the box. You can add the LayerSlider element to your site just like you normally would, then you can select the project you want to embed. Due to the discrepancy between various versions of Visual Composer, we don't have a tutorial video or more specific guide at this time. However, if you are a Visual Composer user the process is the same you've already used to and it's pretty straightforward.

Visual Composer also accepts shortcodes discussed in method 1. You can add a text element and paste the appropriate shortcode into it to embed projects. The below illustration shows the WPBakery Page Builder, which was the original plugin before they split apart with Visual Composer.

Inserting a project with WPBakery Page Builder.

Method 6: Other Page Builders

Most page builders in themes support embedding LayerSlider projects out of the box. Whether you're using a custom solution or a 3rd party plugin, 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 3 respectively.

Method 7: PHP function

Because a LayerSlider project 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 project into the corresponding area. By providing filters you can show it on certain pages only depending on your settings. Here is the function definition:

layerslider ( mixed $projectID [, string $filters [, array $overrides ] ] )
  • The $projectID 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 project settings to be applied to the inserted project. Check the Overriding settings section to learn more.

The following examples are all valid:

					<?php layerslider(1); ?> // Displays the first project on every page
					<?php layerslider(1, 'homepage'); ?> // Displays the first project only on your home page
					<?php layerslider(1, 'my-custom-post-title'); ?> // Displays the first project on a custom page by name
					<?php layerslider(2, '1369'); ?> // Displays the second project on a custom page by ID
					<?php layerslider('homefullwidth', 'category-name'); ?> // Displays the project with the slug 'homefullwidth' on ali/custom page by a category name
					<?php layerslider(3, 'homepage,about-us,1234'); ?> // Displays the third project on multiple pages

It is important to check the corresponding project ID on the LayerSlider WP project list page. When you remove some project, 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 projects on specific pages

Filters can be used to target specific pages where you want a project to be displayed. This can be extremely helpful if you're inserting projects 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 project on your site's main page.
  • Page ID: Use a page ID to display projects 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 project on all pages belonging to that category.

Important: You can set multiple filters. Just provide a comma separated list if you want to display projects 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 project settings

LayerSldier allows you to override project 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 your project. For example, you might want to change the project's skin on some pages to fit better to a different page style. This can be achieved like so:

  • Shortcode:
    [layerslider id="1" skin="borderlessdark"]
  • PHP function:
    <?php layerslider( 1, '', array( 'skin' => 'borderlessdark' ) ); ?>

Another example could be the starting slide. You might want to insert the same project on multiple pages with a different opening:

  • Shortcode:
    [layerslider id="1" firstslide="3"]
  • PHP function:
    <?php layerslider( 1, '', array( 'firstslide' => 3 ) ); ?>
You can tell the exact option names by inspecting the name attribute of the project 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 traditional sliders are also available in Popups as well. This includes our feature rich image & content editor, multilingual projects, 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.

More information and live examples

Illustration of the Popup settings.

Embedding Popups

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 projects will work the same, you will probably want to use the auto include feature dedicated specifically to Popups for additional customization.

The features described below will only work 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

The "Close Popup" layer action can be very helpful if you want to design your own close button with unique appearance and transitions. Alternatively, you can apply the ls-close-popup-button class name to any element within the popup 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 registering your LayerSlider license 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 Project Settings → Layout. Without that, your project will appear as regular sliders or not at all.
  • Can I use the same porject both as a Popup and regular slider? No. Popups have different layout options that would make it really impractical. However, you can duplicate the project and use slightly different settings if you are looking for a way to achieve this.
  • 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.
  • 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

  1. First, you need to install a FancyBox WordPress plugin. In our guide we used Easy FancyBox.
  2. Make sure to review the Easy FancyBox plugin settings and enable to load videos and iframes.
  3. After setting up FancyBox, jump back to LayerSlider and select a layer in the editor that you want to use with FancyBox.
  4. 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.
  5. That's it, FancyBox should now appear when you click on the layer on your front-end pages.
Example of setting up a Google Maps modal with the Easy FancyBox plugin in a LayerSlider slider

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.

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.

    						jQuery('#layerslider').on('sliderDidLoad', function( event, slider) {
    							console.log( event, slider );
    						});

Legacy API - OBSOLETE, DO NOT USE

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:

				for(key in data) {
					console.log(key + ' = ' + data[key]);
				}

API methods

Method Description Example
(integer) 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 → → System Status. 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 → → 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.
Updating issues 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
Quick Fix: Try the SSL Insecure Content Fixer plugin, it should help in most cases.

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.

Open the Developer Documentation

Looking for LayerSlider JavaScript API?

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.

Jump to the LayerSlider API section

Support

Before reporting an issue

There are some common practices you should try before reporting an issue:

  • Check System Status
    Select LayerSlider → → System Status. 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.

Open Support Ticket

General inquiry

If you have a non-support related question or inquiry, please reach out to us via our contact form.

Contact Us

Useful pages

Page Description
Help A collection of pages that cover most topics and questions that customers are often looking for.
Legal 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.
Frequent Questions Frequently asked questions about orders, payment, licensing, product support, and other common topics.