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.

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.

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.

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.

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.

Examples

• Switch slides with custom controls:

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

  1 2 3

  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.

  1 2 3

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

LEGACY API - OBSOLETE, DO NOT USE

Event reference

Slider data

To list all properties in the data object just paste this code snippet into a callback function and check your browser's Javascript console:

API methods