Try to find an answer here

This integrated documentation is inteded to give you information about the usage of the plugin. It contains the most common questions such as how can you insert the slider into your pages or create multilingual sliders.

Check out our item support page & FAQs

If you didn't find the answer you are have looked for in this documentation, you can also try to search through our ticket system or item FAQs on the following URL:

http://support.kreaturamedia.com/

Inserting the slider with shortcode

You can place your sliders into pages and posts with their shortcodes. You can find the shortcode for each slider in this page next to their names in the list view. To insert the slider, edit a page or post and insert its shortcode into the WordPress text editor.

Inserting the slider with the LayerSlider WP widget

LayerSlider WP supports widgets, so you can place your slider in your front-end page 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 area.

Please note that some themes may not support a widget area what you need. In this case, you can create a new widget area by editing your theme files. Here is the official documentation about widgetizing your theme.

Calling the slider from your theme files

Because a slider can be an integral part of your site, you may want to place it into your theme files. There is a PHP function with filtering options which you can call for example from the header.php file of your theme and it inserts your slider into your home page or certail other pages depending on your filtering settings. Here is the function definition:

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

The $sliderID parameter can be found on the plugin page in the slider list view at the first table column.

The $pages parameter is a comma separated list of pages either by name or the ID of the pages. 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, the "homepage", with you can filter LayerSlider WP to display the slider on your home page. It is also works if you set up a static custom page instead of the default post listing.

The follwing examples are all valid, you can use either of these, you can even mix them on 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'); ?> // Diplays the second slider on a custom page by ID
<?php layerslider(3, 'homepage,about-us,1234'); ?> // Displays the third slider on multiple pages

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

Normal mode:

You have to leave both Responsive and Full-Width settings disabled. You can set the width of the slider in pixels or also in percentage value, you have to set the height of the slider in pixels.

Responsive mode:

You have to enable Responsive and disable Full-Width settings. You have to set both of the width and the height of the slider in pixels. You should know that in responsive mode the given width and height values will be the default starting values of your slider. In this case you can create your slider as you would do it normally but if the slider is resizing, all of your image, embedded video and text sublayers will be also resized and also repositioned of course.

Full Width mode:

You have to enable Full-Width and disable Responsive setting. You have to set the width to 100% and the height of the slider in pixels. In this mode the slider will be as wide as your browser even if the width of your document is smaller and the height of the slider will be fixed. Sublayers will be not resized but they will be repositioned if the have percentage values of left and / or top properties.

Responsive + Full Width mode:

You have to enable both Full-Width and Responsive settings. You have to set both of the width and the height of the slider in pixels. In this mode the slider will be as wide as your browser even if the width of your document is smaller and the height of the slider will be always proportional to the original ratio of width / height. Of course sublayers will be resized and repositioned like in responsive mode.

Ordering slides

Your slide tabs are drag n' drop enabled, you can grab any and reorder them as you like.

About slide transitions

Since LayerSlider WP version 4.0.0, there are more than 200 built-in preset slide transitions. If you create a new slider, the new slide transition will be used by default, but you can still use the old one with the switch in the slide options.

You can choose transitions you like with the "Select transitions" button. If you choose more than one transition, LayerSlider will use a random one from your selection. If you don't choose any of them, a random one from all the available transitions will be used.

Please note that you have to save your slider after selecting new slide transitions.

Easing options

Easings are timing functions of the animations, you can manipulate the objects movement with it. Please visit this page to find out more about easings and see real-time examples.

Naming layers

• To add a name to a layer just simply click on its default name and type the new name.

Ordering layers

• You can grab any layer and drag it to up or down in the layers list. The last layer in the list will be above all the others inside the slide.

Layer tabs

• Basic Here you can select the type of your layer which either an image, or any of the available text type with the contents. Text layers can contain any HTML code, so you can intert anything, for example a Youtube video with its embed code.
• Option In this section you can customize your layer animation settings, including delays, durations and easings. There is an option to hide this layer, so it won't show up in your slider. If you want to create more similar layers, you can also duplicate it.
• Link If you want to link your sublayer, you can enter the URL here and select a target which controls the link behaviour. _self means that the link will open in the current tab/window while the _blank will always create a new tab/window.
• Style In this tab you can customize your sublayer appearance. Please see the tooltip messages for example codes for each field. If there is no option for your needs, you can enter your custom CSS code in the "Custom Styles" text field. Please note that the above fields will always override the custom style settings if they have the same settings.
• Attributes If you want to work with this layer in your custom Javascript or CSS code, you can apply attributes on it, such as ID, classes, alternate text for images and so on.

Easing options

Easings are timing functions of the animations, you can manipulate the objects movement with it. Please visit this page to find out more about easings and see real-time examples.

Selecting sublayers

You can quickly select a sublayer just by clicking on it in the WYSIWYG editor. This will opens the sublayer options in the sublayer list.

Positioning sublayers

Just grab a sublayer and move it around in the editor to set your desired position. For accurate positions, you can set the left and top values manually under the style tab of the sublayer. If you want to use percentage values you should set them manually in the sublayer options.

Real-time preview

If you want to see your layers and sublayer in action, you can click on the "Enter Preview" button. This will embed a full-featured LayerSlider, just like in your front-end page. To end the preview session, just click again on this button "Exit Preview" and you will get back the WYSIWYG editor.

If you aren't familiar with the settings, this feature can be useful to test your settings and see which options are responsible for which effect.

Embedding videos

LayerSlider works with many video embedding code, but we supports particularly YouTube and Vimeo. For these video sharing sites, we integrated a lot of features such as autoplay, preview image, and pausing the slideshow while the slider is playing your videos.

To embed a video, just create a DIV type sublayer and place the embed code into the HTML text field. You can find the embed code on the video page at YouTube or Vimeo.

Customizations

You can customize your video player appearance and behaviour and LayerSlider can handle them. On the video page at YouTube or Vimeo you can set the video size, the player appearance, and many other things. Before you insert the embed code into LayerSlider, please have a look at the options you have on the video page.

Unsupported videos and players

LayerSlider can handle many video players since it allows any HTML elements in your sliders, but we supports particularly YouTube and Vimeo. For other videos most of the built-in video features will be unavailable.

Using the LayerSlider API and callback events you can implement some of these features manually, such as starting and stopping the player when the corresponding slide comes in and slides out. For more info about doing this, please read both our callback events and API documentation and the video player documentation which you are using as well. We can't supply you some examples since every video player has its own API and behaviour settings.

Translating the plugin's user interface without a 3rd party solution

You can find the details about translating the plugin's user interface in documentation that's included in the package you downloaded from CodeCanyon.

Creating multilingual sliders with the qTranslate plugin

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 in 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 their homepage.

Translating with the WPML plugin

Deep-linking

Since LayerSlider WP 3.0, you have an option to deep-link a layer. This is means that you can give a special URL to your users that will open LayerSlider with the desired layer on start. To do that, you have to specify a deeplink name in your Layer Options and reference in the URL with a hash mark followed this name.

For example if you added the name for the deeplink field "surprise", you can reference this layer with the URL "yourdomain.com/yourpage/#surprise".

Please note that we changed the deeplink method in LayerSlider WP 3.5, the old method used IDs, this is no longer supported.

About events in programming languages

Many programming language supports events or notifications. The basic concept is that you can subscribe to these events and the application will send you a notification or run some code when they accour, so you will have a chance to do something you may want to be done in certain points of your program. For example change the site's background when the slider switching slides.

Javascript uses callback functions

In Javascript these events commonly used with callback functions. Instead of sending and receiving notifications, you just pass an anonymous function (also known as blocks in other languages) with your own code to a function or method call as a parameter and the application will execute it when the time has come. LayerSlider uses this kind of event handling.

Events in LayerSlider

So we now by now the technique about event handling, lets see which kind of event LayerSlider has:

• cbInit: This event will fire when LayerSlider finished building up the DOM and successfully loaded. If you want to do something with the LayerSlider elements right on the start, you won't be able until LayerSlider has loaded, you have to use this event.
• cbStart: Calling when the slideshow has started.
• cbStop: Calling when the slideshow is stopped by the user.
• cbPause: Fireing when the slideshow is temporary on hold (for example by the "Pause on hover" feature).
• cbAnimStart: Calling when the slider commencing slide change (animation start).
• cbAnimStop: Fireing when the slider finished a slide change (animation end).
• cbPrev: Calling when the slider will change the previous slide by the user via previous button, keyboard navigation, or touch control.
• cbNext: Calling when the slider will change the next slide by the user via next button, keyboard navigation, or touch control.

A simple example of a callback function

This simple example will alert the user when LayerSlider changed a slide. To do that we have to pass this function to the cbAnimStop event.

function() {
	alert('The slider switched to a new layer!');
}

What's next?

If you want to achieve something with the event callbacks, you probably instrested in our API. Please continue reading with the next section of this document.

About application programming interfaces (APIs)

An API is a way to control an application, or get some info about the data which the application is working with. This is a way to two separate application can work together. LayerSlider has an API too, you can control the slider from outside of the application.

API methods

• integer: The slider will change to the specified slide. It starts with 1.
• next: The slider will change the next layer.
• prev: The slider will change the previous layer.
• stop: Will stop the slideshow.
• start: Will continue or start the slideshow.
• data: Will return all the data which LayerSlider is working with. For example you can identify which slide is showing currently, or which one will the next to show.

Using the API

To run one of the above API command, you have to call the LayerSlider jQuery method on the slider element and pass the command as a parameter. WordPress uses IDs on each slider with the word "layerslider_" and the number of the selected slider.

Example: jQuery('#layerslider_1').layerSlider(2);

This will switch to the second slide. If you want to use this with a link, you can use the following code:

<a href="javascript:void(0);" onclick="$('#layerslider').layerSlider(2);">to slide 2</a>

Working with LayerSlider data

The LayerSlider data object is a huge collection with all the information you need. We don't have enough space here to list all of the properties you can work with, you have to check them manually. Here are the most important ones:

• curLayer: The current slide DOM element.
• curLayerIndex: The current slide index. Starts with 1.
• nextLayer: The next slide DOM element.
• nextLayerIndex: The next layer index. Starts with 1.
• isAnimating: This property returns whether the slider animating or not with boolean.
• layersNum: Returns the count of layers (slides).

Callback functions and LayerSlider API

When you request the LayerSlider data object with its API call, you will have the information for that exact moment. When LayerSlider working along, these informations may change or will be outdated. You probably want to use this information in an exact moment, when something just happened, so you have to use the LayerSlider API and the callback events at the same time. To do that, you can use a custom named variable in the callback function header section which will be filled with the data object of LayerSlider. Here is an example of using both with the cbAnimStart event:

function(data) {
	alert('The next slide is: ' + data['nextLayerIndex']);
}

A more complex example

Here is a more complex example which show which things you can do with our API. This example implement a custom navigation area for a LayerSlider slider.

You can find this example here.