LayerSlider WP

Responsive WordPress Slider Plugin

Version: 5.5.1 | Released: 19th August 2015 | What's new?

Thank you!

Thank you for purchasing this product. If you have any questions that are beyond the scope of this documentation, please feel free to email us.

About this item

LayerSlider WP is a premium multi-purpose slider for creating image galleries, content sliders, and mind-blowing slideshows with must-see effects, even from your WordPress posts and pages.

It uses cutting edge technologies to provide the smoothest experience that’s possible, and it comes with more than 200 preset 2D and 3D slide transitions. It has a beautiful and easy-to-use admin interface with supporting modern features like drag n’drop WYSIWYG slider builder, real-time previews, timeline view, Google Fonts and transition builder for custom animations.

It’s device friendly by supporting responsive mode, multiple layouts, touch gestures on mobile devices, and uses techniques like lazy load and conditional script loading for optimal performance. You can add any content into sliders, including images, text, custom HTML, YouTube and Vimeo videos or HTML5 self-hosted multimedia contents. It’s also SEO friendly by allowing you to build semantic markup with custom attributes that search engines can index easily.

LayerSlider comes with 13 built-in skins, and it has tons of options to entirely customize the appearance and behavior of your sliders at the smallest detail.

Slider features

  • General Features
    • Super smooth hardware accelerated CSS3 transitions with jQuery fallback
    • Fully responsive & multiple layouts support
    • High compatibility with many fallback features for old browsers
    • Lazy loading images for better performance
    • Unlimited number of layers with image, video, audio, text or custom HTML content
    • Powerful API for more customization
    • SEO friendly
    • Multiple sliders can be added on the same page
    • Included free slide transition gallery
    • Very detailed documentation with examples
    • Unlimited variations of usage (image slider, image slider with text, content slider, video gallery slider, mixed content slider, banner rotator, carousel, etc.)
    • Free updates & support
  • Slider Layout & Appearance
    • Responsive, full-width, full size or fixed dimensions layout
    • Responsive under & Layers container features for full-width sliders
    • 13 skins included
    • Skins PSD file included for easily creating your own skins
    • Option for specifying a global background color or image to the slider
  • Slideshow
    • Auto-start slideshow (can be disabled)
    • Pause slideshow on hover feature
    • Starting with specified slide
    • Optional random slideshow feature
    • Option for fade in the first slide without animating the layers
    • Option for backwards-slideshow (Two way slideshow)
    • Looping feature
  • Navigation
    • Bullets, hover thumbnails or thumbnails
    • Touch navigation on mobile browsers
    • Keyboard navigation
    • Option for disabling prev / next buttons or bullets
    • Option for showing prev / next buttons or bullets on hover
    • Two types of timers: bar timer and circle timer
    • Option for customizing the thumbnail area and the size of thumbnails
  • Slide Options
    • More than 200 2D & 3D transitions
    • Option to create your own slide transitions
    • Option to link the whole slide
    • Option for adding a deep link to a specified slide
  • Layer Options
    • Layers can slide (axis free), fade, rotate (in 2D or 3D), scale and skew, or a mixture of these
    • Option for setting the transform origin of transition
    • Option for linking layers
    • Option for adding a link to layers which will change the slider to a specific slide
    • Optional parallax effect on layers
  • Video & Audio
    • Easy to use with YouTube, Vimeo or HTML5 videos or audios
    • Auto-pause slideshow while videos or audios are playing
    • Auto-play videos and audios (optional)
    • YouTube and Vimeo thumbnail images
  • YourLogo
    • Option for adding a fixed image over the slider
    • Option for styling and adding a link to this image
  • Compatibility
    • Requires jQuery 1.8 or newer. Working with both 1.10.x or 2.x versions. Please note that jQuery 2.x is no longer compatible with IE7 and 8)
    • Requires WordPress 3.5 or newer. Compatible with WordPress 4.1.
    • Working in Chrome, Firefox, Safari, IE7-11, Opera
    • Working in mobile browsers
    • The 3D slide transitions are working under Chrome, Firefox, Safari, Opera, iOS and the latest Android versions.
    • Most of the 2D slide transitons are working under all browsers.

WordPress specific plugin features

  • Build dynamic sliders from WordPress posts and pages

    With advanced filters for finding posts or mixing them with static content
  • WYSIWYG editor with real-time previews

    Build sliders with modern techniques like drag n’ drop
  • Timeline view

    Review your layer timings like in a movie editor
  • Multisite ready
    With network-wide activation support
  • Translation and localization ready

    Supports popular plugins like WPML and qTranslate for multilingual sliders
  • Transition builder, Skin and CSS Editors

    Customize the built-in skins and transitions easily
  • Automatic updates

    Receive update notification and install new versions with one click
  • Import / Export feature

    Move sliders between sites easily
  • Plugin permissions

    Provide plugin access to different users to collaborate on working sliders
  • Use Google Fonts

    With built-in search and configuration options
  • Advanced settings to improve performance
    Scripts in the footer, conditional script loading, etc
  • Use self-hosting video & audio
    Easily upload and insert HTML5 multimedia contents
  • Sample sliders included
    You can check the settings we used to help you get started
  • Interactive tooltips and integrated docs
    Receive instant help for a specific problem whenever you need it

Third party credits

We are extremely grateful for the people working on the projects below. These guys are making our lives much easier, thus we can focus on building high quality products.

Project Homepage Comment
CodeMirror codemirror.net A versatile text editor implemented in JavaScript for the browser.
Dashicons github.com The official icon font of the WordPress admin as of 3.8
Google Fonts API google.com Hundreds of free, open-source fonts optimized for the web hosted by Google.
GreenSock greensock.com The most advanced web animation library to build spectacular transitions.
jQuery jquery.com The most popular JavaScript library for building complex web apps.
MiniColors labs.abeautifulsite.net A Tiny Color Picker.
phpQuery code.google.com A server-side DOM API based on jQuery.

Installation through the WP admin interface

  1. Extract the archive file on your machine that you've downloaded from CodeCanyon.
  2. On your WordPress admin area navigate to Plugins -> Add new and press the Upload Plugin button.
  3. Choose the "layersliderwp-x.x.x.installable.zip" file that you've extracted from the downloaded archive, then hit the Install Now button.
  4. WordPress might ask you to enter your FTP login credentials. Click on Proceed when you finished.
  5. The plugin is now installed, click on the Activate Plugin button.
  6. A new menu entry called LayerSlider WP should appear on your WordPress admin sidebar.

Check out our video tutorial!

If you're unsure where or how to install the plugin,
just watch our short screencast video.

Installation via FTP

  1. Extract the archive file on your machine that you've downloaded from CodeCanyon.
  2. Find the "layersliderwp-x.x.x.installable.zip" file in the extracted contents and unpack that archive as well.
  3. Open your favorite FTP application and connect to your server. Navigate to the "/wp-content/plugins/" folder.
  4. Copy over the "LayerSlider" folder extracted from "layersliderwp-x.x.x.installable.zip" file.
  5. Navigate to the Plugins page on your WordPress admin area and click the Activate button below LayerSlider WP.
  6. A menu entry called LayerSlider WP should appear on your WordPress admin sidebar.

Troubleshooting

  • Please be aware that you must use the "layersliderwp-x.x.x.installable.zip" file when you try to install the plugin from the WP admin area. The main package downloaded from CodeCanyon contains a lot of other assets. You must unpack it first and use the above mentioned file for installation.
  • 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 revert to the FTP method.
  • 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 the official 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.

Updating via the auto-update feature

Since LayerSlider WP 4.0.0 we are supporting automatic updates. The auto-update feature requires a valid item purchase code, which you can find by navigating to your CodeCanyon downloads page and download your License Certificate for the corresponding item. Your Item Purchase code is in the downloaded text file. Please enter this code in the "Auto-Updates" section that you can find on the LayerSlider WP admin area.

Please note, at the moment we can only provide automatic updates to our direct buyers. Due to technical reasons LayerSlider can't recognize purchase codes received for themes, even if they offer LayerSlider as a bundled item. In these cases new releases will be provided by theme authors through theme updates.
Auto-update box
Illustration of Auto-Updates section

Updating the plugin manually

Once you've downloaded the most recent version from your CodeCanyon downloads page you can deactivate and remove the old version, then install the new one. Your sliders and settings are in the database, removing the plugin won't touch them. The new version always has backward compatibility, so you don't have to worry about losing your work.

Updating the bundled version in a theme

If you've received LayerSlider as a bundled item in your theme, new releases will be provided by the theme author through theme updates. Please note, our auto-update solution doesn't work with bundled versions of LayerSlider.

Troubleshooting

  • If the auto-update feature doesn't accept your purchase code, please double check that you've entered it correctly, without including spaces or other extra characters. Also, please note that due to technical reasons it won't recognize your theme's purchase code, even if it offers LayerSlider as a bundled item.
  • Rarely, a temporary outage in our/Envato services could also result unrecognized purchase codes. Please try it again a little later.
  • WordPress checks for new updates periodically at certain times. It also caches the results. If a new release doesn't show up immediately, please give it some time while WP can find it.
  • Depending on the default settings, you may have to enable or disable some settings related to new features after an update. If you experience any unwanted change, it's always a good idea to check the settings of your sliders, there are probably new options to control these changes.

Adding a new slider

Press the Add New button located on the top of the LayerSlider admin page. The plugin should navigate to the slider builder interface after you've entered the name of your new slider.

Duplicating sliders

Hitting the duplicate icon () will create an identical copy of the corresponding slider. This feature is useful if you would like to experiment on a slider without changing the original. You can also use this feature to have a base when you want to build a slider with similar settings.

Removing sliders

You can remove a slider by pressing the trash can icon (). This action will hide the slider from all pages, but a copy in your database will be preserved for backup.

Restoring sliders

You can make the previously removed sliders visible under the Screen Options menu located on the top of the page by checking the Removed sliders option. You can restore sliders by pressing the restore icon ().

Permanently delete sliders

Having hidden backups from previously removed sliders can always be useful. This will not affect your site's performance, thus we don't recommend to permanently delete sliders. However, if you chose to do that, you can find the Delete permanently option in the drop-down list below your sliders.

Merging sliders

If you have slides in different sliders that you would like to use together, you can merge them. Just select them from the list and choose the Merge sliders as new option from the drop-down list below.

Number of sliders per page

You can find this setting under the Screen Options menu located on the top of the page.

Importing demo content

Press the Import sample sliders button located on the top of the LayerSlider admin page, then select the slider you wish to add. Importing all of them at once could be slow or problematic depending on your server settings.

Importing our demo sliders will allow you to see our settings and get familiar with the plugin. You can freely experiment on these sliders without worrying, since you can always import a new, untouched copy.

We've included several samples in the plugin and download package. Some of them are really small and easy to understand, while others are much more complex and use advanced features of the plugin.

Illustration of the "Import sample sliders" button

More samples

To keep the install package at a reasonable file size we've only included our 3 most popular sliders. However, you can find more in the archive you've downloaded from CodeCanyon in the sample sliders folder.

Troubleshooting

  • Importing our demo sliders requires the PHP ZipArchive extension installed on your server. In the "Export sliders" box you should see a feedback message about the availability of this extension. Please contact your web hosting service provider if it's unavailable.
  • Importing a slider will add its images to your WP Media Library. Larger sliders might have a file size that exceeds the upload limit set on your server. To increase the maximum file size of an upload, please contact your web hosting company.
  • Larger sliders with many images could also consume considerably lot memory during the import. Most servers should not have any issue with larger sliders, but in some cases you might experience unexpected issues like partially imported sliders.
  • If you're experiencing any issue with importing, it's probably linked to memory or execution time limitation on your server. To fix these issues, please contact your web hosting company, since they usually don't offer a way to change these settings remotely.
Illustration of the Import / Export section

Importing sliders

Choose a previously exported slider under the Import / Export tab and hit Import. Export files with a .zip extension generally contain slider images as well (if it wasn't disabled when the export file was created). Exports with .json extension contain only the slider settings.

Importing from outdated versions

In the earliest versions of LayerSlider there was only an export code that you could copy & paste to import sliders on other sites. If you have an export code from one of these versions you just need to paste it into a new text file and upload it in the same way. The name of the file could be anything, but you need to use the .json file extension.

Exporting sliders

You can export sliders by selecting them from the list under the Import / Export tab. By holding the Ctrl/Command button you can select multiple items. Since LayerSlider v5.1.0 you can also include the images used in sliders. Please note, selecting multiple sliders with images can drastically increase the exported file size and could lead import issues on sites with certain server sertings.

Troubleshooting

  • Importing sliders with images requires the PHP ZipArchive extension installed on your server. Under the Import / Export tab you should see a feedback message about the availability of this extension. Please contact your web hosting service provider if it's unavailable.
  • Importing a slider will add its images to your WP Media Library. Larger sliders might have a file size that exceeds the upload limit set on your server. To increase the maximum file size of an upload, please contact your web hosting company.
  • Larger sliders with many images could also consume considerably lot memory during the import. Most servers should not have any issue with larger sliders, but in some cases you might experience unexpected issues like partially imported sliders.
  • If you're experiencing any issue with importing, it's probably linked to memory or execution time limitation on your server. To fix these issues, please contact your web hosting company, since they usually don't offer a way to change these settings remotely.

Using Google Fonts

LayerSlider can load custom fonts hosted by Google on google.com/fonts. You can find the corresponding section on the plugin's admin page and add Google Fonts, which can be used in sliders or other parts of your site.

Illustration of the Google Fonts section

Character set support

LayerSlider uses Latin characters by default , but it supports Cyrillic, Devanagari, Greek, Khmer and Vietnamese scripts as well.

Themes with Google Fonts support

Many WordPress themes support Google Fonts. However, it's common that they only load them on the front-end pages and they will appear incorrectly when you would build a slider on the admin interface. To workaround this issue just add them in LayerSlider and check the "Load only on admin interface" option.

Provide non-admin users access to LayerSlider

Under the Permissions tab you can easily select any user role giving the members permission to change plugin settings and manage your sliders. By selecting the option Custom and entering a capability you can target users more accurately. For more information about WordPress capabilities, please read the Codex page.

Illustration of the Permission settings

About the Advanced Settings section

Under the Advanced tab you can find many troubleshooting options to workaround common issues you might experience on your site. Please note, these settings can break your site when used incorrectly, and we don't recommend changing the defaults. These settings might help solving issues caused by 3rd party items, but you should only use them when it's necessary.

Illustration of Advanced settings section

Overview

The slider builder interface can be a bit overwhelming at first sight, since LayerSlider provides many options to customize your work for your own needs. There are many tools to provide help of getting started, just consider the advices below.

Always read the tooltips messages

Due to space efficiency we're using tooltips for describing what each options exactly does. Just place your mouse cursor over an option and a tooltip message will appear with additional information.

Use the preview mode

By pressing the Preview button you can see your work in action instantly. Don't by shy to change settings. If you're not sure about how an option exactly works, just change it and observe the differences in the preview mode.

Check out our samples

Discussed under Gettings Started / Importing the demo content, you can see how we built our own demo sliders and which settings we used to achieve certain animations. Don't be afraid making changes on these samples, you can import another copy at any time.

We've included several samples in the plugin and download package. Some of them are really small and easy to understand, while others are much more complex and uses advanced features of the plugin.

Slider settings

This is the page where the plugin navigates you after adding a new slider. On this screen you can set common settings like the size of the slider, and customize its appearance or features in the other sub-sections.

Illustration of the Slider Settings

Setting the slider layout

Mode Description
Fixed size The slider will have a fixed size, and it cannot be resized.

To use: Disable all Responsive mode and Full-width slider settings options. You can set the width of the slider in pixels or use a percentage value. You have to set the height of the slider in pixels.
Responsive Responsive web design is aimed at crafting themes, plugins and other kind of web contents to provide an optimal viewing experience across a wide range of devices (from mobile phones to desktop computers). This mode will automatically scale your slider to fit to the available space on any device.

To use: Enable the Responsive and disable all Full-width slider settings options. You have to set both of the width and the height of the slider in pixels.
Full-width In this mode the slider will be as wide as your browser window, even if your theme is using a boxed layout instead of edge-to-edge design. The height of the slider will be fixed. Layers will be not resized, but they will be repositioned if they have percentage values set for their Left and/or Top properties.

To use: Enable the Full-Width and disable Responsive options. You have to set Width to 100% and provide the value of Height in pixels.
Full-width+Responsive The responsive function needs an initial proportion to calculate new dimensions for scaling. A full-width slider will always be as wide as your browser window, so your slider initial size depends on the viewing environment and the plugin cannot identify an exact proportion to work with. Another aspect is to control how scaling should work with large screens and when should it start to downscale your content. This can be set with the Responsive under option. In general it should be the width that your site has, somewhere around 1000 pixels.

The position of your layers can also be a concern on large screens when the slider gets really wide. For this matter, you can use the Layers container option. You can specify how wide your slider should normally be, then the plugin will wrap your content in an "invisible box" that is centered within the slider.

To use: Enable normal Full-width mode and set Responsive under and Layers container as described above.

Fullscreen support

At the moment LayerSlider doesn't have a dedicated fullscreen option. You can enter 100% x 100% for Width and Height, but you will likely need to make some changes in your theme to work properly. Since percents are relative values, you will need to make sure that all of the parent elements of the slider on page have the proper dimensions set, so the slider can take the available space as expected.

Please note, this requires some web development knowledge, and we cannot recommend it to users without experience. This is a highly requested feature and it will be added to the plugin shortly.

List of slides and the Slide Options area

About slide transitions

LayerSlider offers more than 200 pre-defined 2D/3D slide transitions. By using the Transition Builder it can be easily extended with custom ones for your own needs. Slide transitions will only use the background image of slides, since web standards don't offer a way to "capture" all contents within a slider. It's important to keep in mind that layers will not be used for slide transitions, even if they made to look like a background image.

Modern web browsers are required for 3D transitions to work properly. If you select any 3D transition, LayerSlider will prioritize them over 2D ones. The plugin has multiple fall-back levels whenever a visitor's machine is not capable of showing certain transitions. In general, 2D transitions are supported on all major web browsers.

Old slide transitions compatibility

We've introduced the current slide transitions with the release of LayerSlider v4.0.0. The earlier solution was still supported at a time, but later on it was entirely removed from the admin area in favor of its much more sophisticated successor. As of today, these settings are still supported under the hood to provide backward compatibility, although you cannot choose to use them in sliders built with the latest releases.

We might completely stop supporting old slide transitions in the near future.

Linking slides

Linking a slide will make its entire surface clickable. You can also link layers to add a button or a smaller control. Layers appear on top of slides, and will gain priority if you link both a slide and one of its layers.

Deeplink

Since LayerSlider WP 3.0, you have the option to deep-link slides. This means that you can give a special URL to users, which will start LayerSlider with the certain slide when they visit your site. To do that, you have to specify a Deeplink name in your Slide Options and use it as a reference in the URL.

If you've entered the name "surprise", you just need to append it to the end of your URL along with the hash tag symbol. For example, the URL "yourdomain.com/yourpage/#surprise" will start LayerSlider with the 4th slide (instead of the fist one) when someone navigates to the page with this URL.

Duplicate slides

Similarly to sliders, you can also duplicate existing slides to make a copy with the exact settings and layers they might have.

Hide slides

Hiding a slide will exclude it from the actual slider on your front-end pages. This means your visitors cannot see it, but you will still be able to access it in the Slider Builder. This feature is particularly useful when you want to hide half-finished slides, or keep older ones without actually deleting them. Please note, at the moment there is no way to make these slides visible on the front-end, even if you would use custom coding.

List of layers and the Layer Options area

Interface tips & tricks

Feature Description
Naming layers Making complex slides will require many layers. Naming them as you build your slide can be really useful to quickly navigate between them.
Re-ordering layers You can drag and re-order layers by grabbing the icon. The exact order is particularly important when you work with overlapping layers, since it controls which layer should be on top of the other.
Highlighting layers Highlighting a layer with the icon will bring it on the top and fade the others. This is useful to find and access layers when they are overlapping each other.
Locking layers Locking a layer with the icon will disable the drag n' drop functionality, securing it from moving around unintentionally. This effect will last until you keep the slider editor opened.
Hiding layers Hiding a layer with the will make it invisible in the visual editor. This is useful when you need to work with overlapping layers. This effect will last until you keep the slider editor opened.

Choose between layer types

Type Purpose
Image Displays an image. You can upload a new image or choose an existing one from your WP Media Library. You can also insert from URL or pull the featured image from posts.
Text This layer type should be used for most of the textual contents. You can select the role of the layer with the sub-controls. Do not wrap your content within an HTML element. This is why we've added those sub-controls. You should not use any HTML codes in this field, with the exception of <br>, <b>, <strong>, <i>, <u> and other general purpose inline text formatting elements.
HTML / Video / Audio You should choose this type of layer to insert multimedia contents or use custom HTML besides text formatting. Your contents will automatically be placed in a <div> element. For using semantic HTML, you can select multiple element roles under the Text type instead of using HTML unnecessarily.
Dynamic content Select this type of layer if you want to use contents pulled dynamically from your WP posts and pages. See Using the Slider Builder / Dynamic Layers section for more information.

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 autoplay, showing a preview image for videos and pausing the slideshow while they are playing.

Just choose the HTML / Video / Audio layer type to embed multimedia contents. For YouTube and Vimeo videos you need to paste the embed code from their website into the text field. Click on the Add Media button to add self-hosted HTML5 video or audio.

At the moment we can't support other media players out of the box, since those solutions have their own distinct APIs to control media playback. However, users with web development experience can use the LayerSlider API to detect slider events and run custom code to control 3rd party media players.

Using WP shortcodes / Adding interactive content

You can do both, but you need to make sure to use an HTML / Video / Audio layer. LayerSlider will only render the content of shortcodes on the front-end pages, so don't be afraid if the slider builder interface doesn't show the result you would expect. Using interactive items highly relying on Javascript can be problematic, and might not work properly.

It also worth mentioning that in responsive mode LayerSlider only scales the layer element itself to gain extra performance. Any layer content should adapt the dimension changes on its own. While this happens automatically in most cases, shortcodes might insert complex HTML that ignores this and the content might not be resized in sync with the slider.

Layer transitions

You can create your animations with these settings. This section might be frightening at first sight, since LayerSlider offers many options to entirely customize your work. However, everyone can learn it quickly and easily by following the tips below:

  • Always read the tooltips messages:

    Due to space efficiency we're using tooltips for describing what each options exactly does. Just place your mouse cursor over an option and a tooltip message will appear for additional information.

  • Use the preview mode:

    By pressing the Preview button you can see your work in action instantaneously. Don't by shy to change settings. If you're not sure about how an option actually works, just change it and observe the differences in the preview mode.

  • Check out our samples:

    Discussed under Gettings Started / Importing the demo content, you can see how we built our own demo sliders and which settings we used to achieve certain animations. Don't be afraid making changes on these samples, you can import another copy at any time.

    We've included several samples in the plugin and the download package. Some of them are really small and easy to understand, while others are much more complex an uses advanced features of the plugin.

Old layer transitions

Since LayerSlider 5.0.0 we've started to use the GreenSock Animation Platform. This step introduced some changes compared to the previously used solution. Your sliders built with an earlier version will continue to work the same as before without making changes. However, the admin interface have dropped the old options in favor of the new engine, and it will automatically convert your settings whenever you try to edit an old slider. Since these new options are working in a different way, the animations might be slightly different in some rare cases, but it should be super close.

We might completely stop supporting the old layer transition system in the near future.

Linking

You can link a layer under its Link tab. Enter an URL and set whether you want to open it on the current page or in a new tab/window. You can also enter a hash tag followed by a number to link a layer to another slide. For example #3 will switch to the third slide when someone clicks on the layer.

Styles

Under the Styles tab of your layers you can find commonly used formatting options to customize their appearance. We highly recommend to use these settings whenever it's possible, instead of adding unnecessary HTML code to the contents of layers.

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

Attributes

You can apply commonly used attributes (such as a unique ID or classes) on layers. This area is made for users with web development experience and interest to use custom coding to achieve a customization level that a visual editor cannot provide.

Adding post contents

Illustration of dynamic layer settings

You can pull individual post information by using post placeholders. These are working very similarly to WordPress shortcodes. You can enter one or more placeholder into the layer's content area, then LayerSlider will automatically replace them with the appropriate content from posts. You can even mix them with static content. Example:

This post was written by [author] on [date-published] will be
This post was written by admin on March 13, 2015

Using post filters

By using the post filters you can target certain WP posts or pages to pull information from. LayerSlider supports custom post types, tags, categories, and taxonimies to find literally any kind of custom content that themes and plugins may use. To set filters you just need select a dynamic layer and click on the Configure post options button. In the opened modal dialog window you can also order the results in your preferred way.

Get the items from results to work with

The post filters are global across slides, but you can select items from the results independently. This allows you to work with posts in a custom order, for example you can retrieve only the even/odd posts from the results. If you want to follow the original order you can choose the option following, then LayerSlider will get them automatically.

Using mixed content

You are not forced to build sliders with dynamic contents only. You can mix them with static slides and layers.

Using custom post fields

You can use the [meta:fieldname] post placeholder to pull content from custom fields. Please make sure to replace the fieldname part with the actual field you want to pull information from.

Frequently Asked Questions

  • Q: Can I use static and dynamic contents at once?

    A: Sure, you can mix them freely. Just make sure to select the Dynamic content from posts layer type.

  • Q: The [excerpt] placeholder doesn't seem to work. Why?

    A: WordPress doesn't generate post excerpts automatically. It is a custom field that you use by enabling it under the Screen Options menu when you edit a post. You can still use the [content] placeholder with a limit.

  • 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 to your site.

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

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.po file from your "/wp-content/plugins/LayerSlider/locales/" folder. When you save your work PoEdit will generate you a .MO file which will be needed to apply your work.

  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/locales/" folder. WordPress should use them immediately if you named your files properly.

Creating multilingual sliders with qTranslate

qTranslate is the most easiest way to create multilingual sliders in LayerSlider. It is a free and simple plugin that supports a shortcode-like syntax to enter text in multiple languages, so it can display the proper one for your visitors. LayerSlider supports shortcodes and other special syntaxes within the contents of layers, so you can enter something like this to create a multilingual slider:

[:en]English text[:de]German text

The line above will output "English text" if the visitor selected English page and "German text" if the visitor selected German. You can read more about qTranslate on its WP.org plugin page.

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
  • Select Translate by WPML option in Select how to localize the theme section.
  • In the newly appeared list of plugins, select LayerSlider and click the Scan selected plugins for strings button.
  • Under WPML -> String translation menu item, you can now see and edit the texts that LayerSlider uses.

Creating multilingual sliders:

LayerSlider registers translatable strings when you save your work. If you want to translate a previously created slider, you need to re-save it, even if you won't change anything. Once LayerSlider registered the translatable items, they will appear under the WPML -> String translation menu item in your WP admin sidebar.

Method 1: Inserting sliders via shortcodes

You can place your sliders into pages and posts with their corresponding shortcodes. You can find the shortcode of each slider in the list of sliders you have, or at the bottom of the Slider Builder page next to the save button. To insert a slider just edit a WP page or post and place the proper shortcode into the WordPress text editor.

WP shortcodes are one of the most commonly used methods of inserting contents to your site. A lot of other solutions (e.g. a page builder in themes) can also accept the LayerSlider shortcode to add sliders to your pages.

Inserting the slider via shortcode
Illustration of using shortcodes in WP Post and Pages
Inserting the slider via the shortcode tool
Using the LayerSlider editor tool to list and insert sliders

Method 2: Inserting sliders via the LayerSlider WP widget

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

Please note that some themes may not support a widget area that you're looking for. In this case, you can create a new widget area by editing your theme files. Here is the official documentation about widgetizing your theme. However, this requires web development knowledge and we don't recommend for users without experience.

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

Method 3: Inserting sliders with a PHP function

Because a slider can be an integral part of your site, you may want to insert it dynamically from the template files. There is a PHP function (with additional filtering options) to do just that. For example, you can call it from the header.php file of your theme and it will insert your slider into the corresponding area. By providing filters you can show it on certain pages only depending on your settings. Here is the function definition:

layerslider ( mixed $sliderID [, string $pages] )

  • The $sliderID parameter can be found in the list of your sliders on the LayerSlider admin area. See the first table column.
  • The $pages parameter is a comma separated list of WordPress pages either by their name or database ID. If you are unsure about your page names or IDs, look at their URL, it is the last component.

There is a special page name called homepage, with you can filter LayerSlider WP to display the slider on your home page only. It also works if you set up a static custom page instead of the default post listing.

The following examples are all valid. You can use any of these, you can even mix them for your own needs:

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

When you want to insert a slider it is important to check its ID on the LayerSlider WP slider list page. When you remove some sliders, their IDs won't be re-indexed and the sequence may broke up. This is important to keep persistent your sliders preventing unwanted changes on the already inserted ones.

About Transition builder

Since version 4.0.0, 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 mentioned in the Slider Builder section:

  • For more information about the available settings, just point your mouse cursor over an option and a tooltip message will appear describing the option's function and possible values.
  • Use the preview mode. The best way to learn is to instantly see how each option affect your work. Don't be afraid of changing settings, just 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. There are some really simple ones, but you can find much more complex transitions as well to demonstrates advanced uses.

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.

Easings

Easings are timing functions of the animations. You can manipulate the movement of animated objects with them. Please visit this page to find out more about easings and see real-time examples with visual representation.

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 your 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 can be used to modify the slider behavior, or wire it up with external solutions. The following events can be used under the Event Callbacks tab of the Slider Builder.

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

You can add a custom named variable in the function definition that will be filled up with data provided by the plugin. The cbInit callback will receive the slider DOM element itself, while all of the other events will have the data object of the slider. The data object can be used to access or override most of the settings that the slider is working with. Usually it is used to get the information related to slides and slideshow progression. The most commonly used properties are the following:

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

The below API methods can be used to control sliders externally, and wire them up with 3rd party solutions.

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 layer. $('#slider').layerSlider('next');
prev The slider will change the previous layer. $('#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');
Make sure to use the proper selector when targeting sliders. While in this example we use #slider, you will likely have different IDs.

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 a message after every slide change with the current slider number. It can be used with the cbAnimStop event callback.

    							function(data) {
    								alert('The current slide is: ' + data['curLayerIndex']);
    							}
  • Custom navigation area:

    On this page you can find a complete example for building a custom navigation area. Please note, this example involves other programming languages such as CSS, HTML and DOM manipulation, and it requires web development experience.

Before reporting an issue

There are some common practices you should try 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.
  • Try to find the source of the problem!
    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 verify that the issue is related to LayerSlider, and is not an incompatibility with another item. 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.
  • Try to find a solution!
    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 FAQs, the comments section and the guides below.

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 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 doesn'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 appear before animating in to the slide See the previous point. It's the same issue.
The slider doesn't seem to repond 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 grey image with 3 dots.
No preview image Vimeo treats Pro/Plus videos as private, even if you make them publicly available. This causes the preview image not appearing in the slider 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 with the plugin/theme author to solve this issue.

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 pugin/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 re-active 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 with 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 cloud 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.

It's for developers!

You can skip this part of the documentation if you are not a developer. Our guides in the developer documentation were made for theme authors and programmers who want to incorporate the plugin into a larger work, or want to modify and extend its capabilities.

What it has to offer?

Our developer documentation includes the licensing terms, theme integration guides, plugin APIs, and any other assets you might need to use to work with the plugin beyond its basics.

Open the documentation for developers

Changes in version 5.5.1

  • Fixed WordPress debug message under WP 4.3.

Changes in version 5.5.0

  • Added back the auto-generated excerpts based on the native WP behavior:
    • Manually entered excerpts will remain "as is", without any modification or formatting. Custom HTML code is allowed.
    • Auto-generated excerpts have all shortcodes and HTML tags removed and they will appear as plain text.
    • Auto-generated excerpts will be trimmed down to 55 words. The [...] "hellip" sign will be appended at the end if the text exceeds this limitation.
    • Custom word count used by themes will automatically be applied in your sliders. Developers can override it by using filter hooks.
    • Auto-generated excerpts respect WP's <!--more--> tag, so you can easily split your content at the point you want.
    • Text length limitation will remain as an optional feature on a per layer basis.

  • Providing update notification for unauthorized sites as well
  • The settings boxes below your list of sliders has been grouped under a tabbed interface
  • Significantly improved YouTube video playback behavior
  • Fixed an issue that prevented some users to properly import our sample sliders
  • Fixed update installation from LayerSlider's admin interface
  • Fixed 'yourLogo style' option in Slider Settings
  • Fixed an issue that caused appearance issues for a few users in Slider Settings
  • Prevent the LS Help menu entry showing up on non-LayerSlider admin pages
  • Fixed the 'Enjoy using LayerSlider?' share sheet appearing in cases when it should not
  • Extended developer documentation with improved examples
  • Updated End-User documentation

Changes in version 5.4.0

  • Entirely new documentation
  • Added option to import sliders without their images
  • Slide backgrounds now parse shortcodes when used in "Enter URL"
  • The LayerSlider shortcode can now accept filtering options
  • Improved compatibility with image preloaders
  • Improved compatibility with certain plugins/themes
  • Fixed several issues with dynamic layers
  • Fixed issues when the same slider was inserted on a page in multiple times
  • Fixed TinyMCE editor tool to properly work with multiple instances on page
  • Fixed some potential JS errors that could happen in some very rare cases
  • YouTube video thumbnails have not been loaded until the previous slide

Changes in version 5.3.2

  • Fixed skins on Windows servers
  • The skin URL now respects HTTPS sites
  • Importing sliders now restores their slug/alias
  • Various other small fixes and improvements

Changes in version 5.3.1

  • Fixed issues with skins
  • Fixed a PHP fatal error on certain installations

Changes in version 5.3.0

  • Added new API method 'redraw' to update the slider's layout and contents.
  • Fixed Javascript error if a slider doesn't have any slide.
  • Fixed several issues related to self-hosted HTML5 video playback.
  • Fixed responsive mode of full width sliders when the orientation changes on mobile devices.
  • Added LS_Sources class for developers to load skins and demo sliders externally.
  • Added Turkish translation thanks to marketplace user thernic.
  • The LayerSlider shortcode is now registered globally, thus page builder solutions can pick it up automatically.
  • Improved compatibility with CloufFlare's RocketScript.
  • Revamped auto-update modal window to fit WP's new design.
  • Fixed an issue related to invalid JSON data, which caused various issues on the admin interface in some cases. Most notably it broke adding/removing slides and the WYSIWYG editor.
  • Fixed "enter URL" button of slide background.
  • Fixed "undefined constant WPLANG" error message that occurred on some installations.

Changes in version 5.2.1

  • Added "Latin Extended" to default Google Fonts character sets
  • Fixed slider slugs/aliases
  • Fixed the transition chooser appearing when hitting the Enter key in text fields
  • Fixed broken layer style settings when using double quotes in certain options
  • Fixed some dynamic contents not showing up in real-time previews
  • Selecting recently used colors in the color picker now properly update the WYSIWYG slider editor
  • Other small bug fixes and improvements

What's new in version 5.2.0?

  • New features
    • A major interface revamp with flat design
    • New transition gallery design with filtering options
    • Added option to apply the currently selected transition to other slides
    • Added option to set post image as the slide background
    • Added option to link the whole slide to post URL
    • Added option to easily link layers to post URL under the 'Link' tab
    • Added option to easily use post image without placeholders
    • Supporting meta post placeholders to print out non-standard post informations (e.g. product details in WooCommerce)
    • Supporting all Google Fonts character sets
    • Added an option to set the duration of the fade transition when the slider is showing up for the first time on page load
    • Added an option to start the slider only if it enters into the viewport
    • Added an option to hide the slider on mobile devices
    • Added an option to hide the slider under the given value of browser width in pixels
    • Added an option to hide the slider over the given value of browser width in pixels
    • Recently used colors in the color picker
    • Support qTranslate in dynamic post contents
    • Support 'random' in shortcode and LS_Sliders PHP class
    • Support category-name filter in layerslider() PHP function
    • Support for including multiple media sources for self hosted video/audio
    • Added new API methods: userInitData, defaultInitData
    • Changed API properties: prevLayerIndex, curLayerIndex
  • Improvements
    • Quicker and more reliable saving method
    • Fixed every known issues with import/export
    • Fixed character encoding issues
    • The plugin no longer relies on mb_eregi() PHP function
    • Fixed missing custom thumbnails when the 'hover' option was selected for the navigation area
    • Fixed several issues with full width sliders, including the "jump" when the page loads
    • Fixed TinyMCE LayerSlider button under WP 3.9+
    • Sliders are no longer remain visible on front-end when they removed instead of deleting
    • Fixed an issue that reset the post options after duplicating slides
    • Fixed several issues with embedded HTML5 videos
    • Fixed an issue which prevented to show embedded video thumbnails on first slide
    • Fixed the stuck loading indicator when some images were missing or couldn't be loaded
    • Fixed the curLayerIndex API variable
    • Security fixes, including a potential directory traversal issue
    • Added an updated version of Greensock Animation Engine with performance improvements and bug fixes
    • Lots and lots of other fixes and improvements

  • Bug fixes
    • Prevent Google and other search engines to index the plugin folder of LayerSlider
    • Slide background images now have proper "alt" attribute based on the attachment/post details
    • Video layers are ignoring the Show until parameter while playing
    • Fixed an issue that caused background flickering in some cases
    • The slider won't hang up if an image layer couldn't be loaded
    • Reduced package file size by removing unnecessary files and legacy code
    • Added some extra CodeMirror instances to edit custom CSS more easily
    • Added play icon to the 'noskin' skin
    • Fixed broken autoplay feature of HTML5 videos

Changes in version 5.1.2

  • Fixed 3D transitions in the latest versions of Chrome
  • Improved compatibility with WeatherSlider WP and wpStickies

Changes in version 5.1.1

  • Fixed some appearance issues
  • Fixed an issue in the new import method

Changes in version 5.1.0

  • Added support for exporting/importing sliders with images
  • Added ability to export/import multiple sliders with custom selection
  • Added slider slug/alias support
  • Added notification of plugin dependencies when detecting issues
  • Fixed several issues related to dynamic sliders from posts
  • Fixed several issues related to embedded videos
  • Fixed timeline view
  • Fixed slide linking issue
  • Fixed the slide ID attribute
  • Fixed issues with relative URLs
  • Fixed invalid error messages after saving
  • Fixed "Convert" button when updating from outdated versions
  • Various other fixes, improvements and interface enhancements
  • Extended APIs for developers with extended documentation

Changes in version 5.0.2

  • Added [image-url] post placeholder
  • Fixed excerpt post placeholder
  • Fixed slide transition issues
  • Fixed blank slider editor issue
  • Fixed loops slider setting
  • Fixed HTML5 video sizing issue
  • Reduced installable ZIP by dropping old sample sliders to avoid installation problems
  • Interface adjustments

Changes in version 5.0.1

  • Added Dashicons support
  • Fixed file permissions that caused various issues in some cases
  • Fixed WPML and better URL handling
  • Fixed tag and category list post placeholders
  • Fixed locales
  • Fixed other small issues, which caused PHP warnings
  • Fixed layer transitions if there are no slide background images
  • Fixed the starting position of layers with percentage value of width

Changes in version 5.0.0

  • New features
    • Build dynamic sliders from WordPress posts and pages
 with advanced filters for finding posts or mixing them with static content
    • Use Google Fonts with built-in search and configuration options
    • Advanced settings like scripts in the footer, conditional script loading etc. to improve performance

    • Parallax Layers - a fancy parallax effect by mouse move
    • New layer transitions: rotateX, rotateY and skew with option to set transformOrigin
    • Added a new skin
    • Easily upload and insert self-hosted HTML5 video & audio
    • Option to restore or permanently delete removed sliders
    • Bulk actions with option to merge sliders together
    • Added “Max-width” option for responsive mode
    • Added “Lazy load” option
  • Interface changes
    • Major interface revamp
    • Using CodeMirror at various places for CSS and JS code editing
    • Added timeline view
 to review your transition timings like in a movie editor
    • New image upload boxes with an easier way to load images from external URLs
    • Added a LayerSlider entry under the “New” menu on the admin bar
    • Added LayerSlider helper for page and post editor to include sliders easily
    • Using cleaner language across the plugin and docs
    • New sample sliders included
  • Improvements
    • Slides and layers can now animating at the same time
    • Layers can now fade + slide at the same time
    • Super smooth transitions with the Greensock engine
    • Improved some layer transitions like fade, slide (axis-free), scale, etc.
    • Improved crossfading slide transition with semi-transparent PNG files
    • Smarter preloading images with lazy load
    • Considerably cleaner markup
    • Ability to override the default slider settings
    • Added lots of action and filter hooks
    • Uploaded contents are not relying on URLs anymore
    • Using nonces to secure your pages
    • Brand new docs
  • Fixes
    • Fixed the '1px slide transition bug'
    • Fixed markup issues such as missing alt attributes in some cases
    • Improved saving to avoid some web server related issues

Before reporting an issue

There are some common practices you should try 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.
  • Try to find the source of the problem!
    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 verify that the issue is related to LayerSlider, and is not an incompatibility with another item. 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.
  • Try to find a solution!
    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 FAQs and the comments section.

How to Contact Us

If you didn't find answer to your problem, please ask your question on the item discussion page or send us a private message from our Codecanyon profile page (See the "Email kreatura" box on the right sidebar) - in this case we will reply via email. We can answer your support questions only in these ways, please do not email us directly.

IMPORTANT! For fast troubleshooting, please send us detailed informations about the issue you're experiencing. Also send us your site url whenever it's possible, so we can check your slider for potential issues and quickly suggest a solution. Please note, that we cannot troubleshoot from screencast videos or screenshots.

Please be patient as it takes some time until we respond (usually in 24 - 48 hours).

Useful pages

Site You can find here...
The website of the item demo sliders and examples
Codecanyon item page the latest version of the plugin
Codecanyon discussion an item discussion topic where you can ask your questions if you get stuck
FAQ of the item a detailed FAQ with answers for the most commonly asked questions and reported issues