Version: 5.3.0 | Released: 19th September 2014 |
What's new?
Table of Contents
Current Chapter: Overview
Introduction
Overview
Features
Third party credits
Quick start & Slider setup
Including resource files
Creating slider element
Initializing the slider
List of slider options
Slider layout
Slides
Creating slides
Configuring slides
Addig slide contents
Linking slides
Using deep links
Slide transition gallery
Custom slide transitions
Layers
Adding layers
Positioning layers
Linking layers
Embedding video / audio
Layer transitions
Parallax layers
Examples
API reference
Event reference
API methods
Examples
Troubleshooting
Video issues
Issues related to jQuery
Loading problems
Known incompatibilities
Upgrading to version 5
Release log
What's new?
Previous versions
SUPPORT
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 the item
LayerSlider is a premium multi-purpose slider for creating image galleries, content sliders, and mind-blowing slideshows with must-see effects. 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’s device friendly by supporting responsive mode, multiple layouts, touch gestures on mobile devices, and uses techniques like lazy load for optimal performance. You can add any content, 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.
Upgrading to version 5 - important changes compared to earlier versions!
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 beter performance
Unlimited 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)
Loops 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 for create your own slide transitions
Option linking 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 mixed 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.7 (working with 1.10.x or 2.x versions, please note that jQuery 2.x is no more compatible with IE7 and 8!) & Greensock Animation Engine
Working in Chrome, Firefox, Safari, IE7-11, Opera
Working in mobile browsers
Most of the 2D slide transitons are working under all browsers
The 3D slide transitions are working under Chrome, Firefox, Safari, Opera, iOS and the latest Android versions (2D fallback mode under other browsers)
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.
The most advanced web animation library to build spectacular transitions.
Including resource files
To get started you need to copy the necessary resource files to your assets folder and include them to your pages. You can use the following example, you need to insert these lines in the <head> section of your site.
Considering performance, you can put the script tags at the footer of your pages before the closing </body> tag.
Make sure to enter the corrent path for these files depending the layerslider folder location on your server.
jQuery and GreenSock are external libraries. Make sure to not insert a duplicate version if your site already uses them.
Creating the slider element
Next, you have to define an element for the slider within the <body> section of a page. The example code below won't do much, it's just a containment element, and it will be filled with its contents later in this guide.
<div id="layerslider" style="width: 800px; height: 400px;">
<!-- The contents on your slider will be here -->
</div>
Adding a slider on a page
The initial size of the slider is defined in the style attribute. You can change those values to specify your preferred dimensions. Also, notice the id attribute. We will use its value (layerslider) as a reference throughout this guide.
It is important to use the style attribute to define the slider dimensions.
Slider setup
You should initialize the slider plugin by calling the layerslider() method on the target element. Since we used the "layerslider" ID in our sample markup, we get that by jQuery and initialize LayerSlider on that element. See the following example:
<script type="text/javascript">
// Running the code when the document is ready
$(document).ready(function(){
// Calling LayerSlider on the target element
$('#layerslider').layerSlider({
// Slider options goes here,
// please check the 'List of slider options' section in the documentation
});
});
</script>
Initializing the plugin
This code is placed usually after the closing </body> tag but the most important thing is that it must be placed after the included resource script files.
Remove the <script> wrapper element if you will use this code in an external JavaScript file.
Configuring the slider
LayerSlider has several options to customize your sliders. These options can be defined by passing an object with your changed values. The nex example shows how to include some custom properties.
<script type="text/javascript">
// Running the code when the document is ready
$(document).ready(function(){
// Calling LayerSlider on the target element with adding custom slider options
$('#layerslider').layerSlider({
autoStart: false,
firstLayer: 2,
skin: 'borderlesslight',
skinsPath: '/static/layerslider/skins/'
// Please make sure that you didn't forget to add a comma to the line endings
// except the last line!
});
});
</script>
Initializing the plugin with custom slider options
List of the available slider options
Layout properties
Values
Defaults
Description
responsive
true false
true
Responsive mode provides optimal viewing experience across a wide range of devices (from desktop to mobile) by adapting and scaling your sliders for the viewing environment.
responsiveUnder
<num>
0 (disabled)
Turns on responsiveness under a specified value of width. Useful on full width sliders. If using this, the normal responsive property should be set to false!
layersContainer
<num>
0 (disabled)
Creates an invisible inner container with the given dimension in pixels to hold and center your layers.
hideOnMobile
true false
false
Hides the slider on mobile devices.
hideUnder
<num>
0
Hides the slider under the given value of browser width in pixels.
hideOver
<num>
100000
Hides the slider over the given value of browser width in pixel.
Slideshow properties
autoStart
true false
true
Slideshow will automatically start after pages have loaded.
startInViewport
true false
true
The slider will start only if it enters into the viewport.
pauseOnHover
true false
true
Slideshow will temporally pause when someone moves the mouse cursor over the slider.
firstSlide
number 'random'
1
The slider will start with the specified slide.
animateFirstSlide
true false
true
Disabling this option will result a static starting slide for the fisrt time on page load.
sliderFadeInDuration
<num>
350
The duration of the fade transition (in ms) when the slider is showing up for the first time on page load.
loops
<num>
0
Number of loops if automatically start slideshow is enabled (0 means infinite!)
forceLoopNum
true false
true
The slider will always stop at the given number of loops, even if someone restarts slideshow.
twoWaySlideshow
true false
false
Slideshow can go backwards if someone switch to a previous slide.
randomSlideshow
true false
false
If true, LayerSlider will change to a random slide. Please note that 'loops' feature won't work with randomSlideshow!.
Appearance properties
skin
'skin_name'
'v5'
You can change the skin of the slider. The 'noskin' skin is a border- and buttonless skin. Your custom skins will appear in the list when you create their folders as well.
skinsPath
'skins_folder_path'
'/layerslider/skins/'
You can change the default path of the skins folder. Note, that you must use the slash at the end of the path.
globalBGColor
'color_name'
'transparent'
Global background color of the slider. Slides with non-transparent background will cover this one. You can use all CSS methods such as HEX or RGB(A) values.
globalBGImage
'image_url' false
false
Global background image of the slider.
Navigation properties
navPrevNext
true false
true
Disabling this option will hide the Prev and Next buttons.
navStartStop
true false
true
Disabling this option will hide the Start and Stop buttons.
navButtons
true false
true
Disabling this option will hide slide navigation buttons or thumbnails.
hoverPrevNext
true false
true
Show the buttons only when someone moves the mouse cursor over the slider. This option depends on the previous setting.
hoverBottomNav
true false
false
Slide navigation buttons (including thumbnails) will be shown on mouse hover only.
keybNav
true false
true
You can navigate through slides with the left and right arrow keys.
touchNav
true false
true
Gesture-based navigation with swiping on touch-enabled devices.
showBarTimer
true false
false
Show the bar timer to indicate slideshow progression. (Not working under IE7 and 8.)
showCircleTimer
true false
true
Use circle timer to indicate slideshow progression.
thumbnailNavigation
'disabled' 'hover' 'always'
'hover'
Type of the thumbnail navigation. Note, that 'hover' setting needs navButtons property set to true!
tnContainerWidth
'percentage_value'
'60%'
The width of the thumbnail container according to the width of the slider.
tnWidth
<num>
100
The width of the thumbnails in pixels.
tnHeight
<num>
60
The height of the thumbnails in pixels.
tnActiveOpacity
0 - 100
35
Opacity in percents of thumbnail of the active slide.
tnInactiveOpacity
0 - 100
100
Opacity in percents of thumbnails of the inactive slides.
Video properties
autoPlayVideos
true false
true
Videos (and HTML5 audios) will be automatically started on the active slide.
autoPauseSlideshow
'auto' true false
'auto'
The slideshow can temporally paused while videos are plaing. You can choose to permanently stop the pause until manual restarting.
The preview image quaility for YouTube videos. Note, some videos do not have HD previews, and you may need to choose a lower quaility.
Image preload properties
imgPreload
true false
true
Preloads images used in the next slides for seamless animations.
lazyLoad
true false
true
Loads images only when needed to save bandwidth and server resouces. Relies on the preload feature.
YourLogo properties
yourLogo
'image_url' false
false
A fixed image layer can be shown above the slider that remains still during slide progression. Can be used to display logos or watermarks.
yourLogoStyle
'CSS properties'
'left: -10px; top: -10px;'
CSS properties to control the image placement and appearance.
yourLogoLink
'url' false
false
Enter an URL to link the YourLogo image.
yourLogoTarget
'self' '_blank'
'_blank'
Slider layout
There are some different layouts of LayerSlider
Rersponsive mode
Fixed dimensions mode
Full-width mode
Full size (background mode)
Responsive mode
Responsive mode is a web design approach 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). With enabled responsive mode, your sliders will adapt the layout of the viewing environment by scaling your content proportionally.
This is the default layout of the slider.
Fixed dimensions mode
If you need to switch off responsiveness in special cases, you can do it by adding the following property into the slider init code:
<script type="text/javascript">
// Running the code when the document is ready
$(document).ready(function(){
// Calling LayerSlider on the target element
$('#layerslider').layerSlider({
responsive : false
});
});
</script>
Fixed dimensions mode
Full-width mode
To create a full-width slider, please set the width of the slider to 100% and make sure that all the container elements of the slider have also 100% width. The normal responsive mode is not working here but there are two useful properties in full-width sliders:
<script type="text/javascript">
// Running the code when the document is ready
$(document).ready(function(){
// Calling LayerSlider on the target element
$('#layerslider').layerSlider({
responsiveUnder : 960,
layersContainer : 960
});
});
</script>
Full.width slider smart features
As mentioned in the previous entries, responsive mode 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, you most likely want to enable it below a certain amount of size, and prevent any action above that. This is why we have a feature called responsiveUnder. It enables you to specify imaginary borders that is dynamically enable or disable responsive layout depending on the size of your browser window.
The layersContainer feature will create an inner area inside your sliders to have invisible borders you can position your content relative to. This area will be as wide as you specify in pixels, and will always be centered. While this feature can be used with any layout, it is made for full-width sliders. Using this feature will result a resized canvas in slider builder that has the new dimensions you have specified.
Full size (background mode)
To use the slider in full size mode you will need to add width: 100%; and height: 100; style settings to the slider element as well as you html and body elements and please make sure that the first element after the <body> should be the slider in your HTML markup.
<html>
<head>
<style>
body, html {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="layerslider" style="width: 100%; height: 100%;">
<!-- slider data -->
</div>
<!-- other site data -->
</body>
</html>
Full size slider markup
Creating slides
You can create slides by adding a <div> element into the slider with the class of ls-slide as can be seen in the below example. The highlighted lines are indicating new additions to our previous examples.
<div id="layerslider" style="width: 800px; height: 400px;">
<!-- this is a slide -->
<div class="ls-slide">
<!-- slide contents goes here -->
</div>
</div>
Adding a slide
Naturally, you can add multiple slides in the same way.
<div id="layerslider" style="width: 800px; height: 400px;">
<!-- first slide -->
<div class="ls-slide">
<!-- slide contents goes here -->
</div>
<!-- second slide -->
<div class="ls-slide">
<!-- slide contents goes here -->
</div>
<!-- third slide -->
<div class="ls-slide">
<!-- slide contents goes here -->
</div>
</div>
Adding multiple slides
Configuring slides
You can configure slide-related settings by entering them in an attribute called data-ls on the slide element. This makes possible to change the timings, transition options and other common settings.
The total duration in milliseconds while slides are being displayed.
transition2d
1
2D transitions to be used.
transition3d
Not set
3D transitions to be used.
timeshift
0
Advance or postpone layer timings relative to slide transitions.
deeplink
Not set
A deeplink alias. See the Using deep links chapter for more details.
Timing slides
We are using the slidedelay option to change the total duration of slides while they will be shown. This value is in milliseconds, so the default value 4000 means 4 seconds.
Later in this guide we will add layers and other slide contents with having their own timing settings. Keep in mind that the slidedelay setting will always overrule other timings and the slider won't wait for other elements if they are exceeding the time interval set with slidedelay.
Slide Transitions
Transitions can be defined in the same way we did in the example. with the option names of transition2d and transition3d. You can use 2D and 3D transitions separately or together depending on your needs.
There are more than 200 2D & 3D preset transitions, so we have created a transition galley that you can view in a separate chapter of this section. You will need to enter their IDs.
You can choose multiple transitions by entering a comma separated list. In that case the slider will use them in random order. or you can use the all value.
If you do not specify any transitions, the slider will use a simple slide transition.
Slide transitions between two slides are working only if slide background images (with class="ls-bg") are added to both slides.
Slide contents
There are four types of slide contents
slide background image
slide thumbnail
special slide data (for example slide link)
layers
A slide can contain one slide background image, one slide thumbnail and unlimited number of layers. In this section you will see how to use the slide background images and slide thumbnails. You can read a complete chapter about layers here.
Adding a slide background image
Add a standard <img> element into your slides with the ls-bg class for setting a slide background.
Slide transitions will work only if a slide background image is added.
Adding a slide thumbnail
The slider can show a preview image of slides if you are using thumbnail navigation. You can specify your preferred thumbnail image by adding an <img> element with the ls-tn class in the same manner as we did with slide backgrounds above.
<div id="layerslider" style="width: 800px; height: 400px;">
<!-- This is a slide -->
<div class="ls-slide">
<!-- This is a slide thumbnail -->
<img src="..." class="ls-tn" alt="Slide thumbnail">
</div>
</div>
Adding a slide thumbnail
The slider will use the slide background if you don't specify a thumbnail image.
Linking slides
You can link the entire surface of slides by adding an HTML <a> element as one of your layers in slides with the special class of ls-link. See the example below.
Please note, that the anchor element with the ls-link class must be the last layer of the actual slide so you should place it directly before the closing div tag of the slide.
<!-- slide -->
<div class="ls-slide">
<!-- slide background -->
<img src="..." class="ls-bg" alt="">
<!-- This will link the whole slide to "example.com" -->
<a href="http://example.com" class="ls-link"></a>
</div>
Linking the whole slide
Deep linking slides
You can specify a slide name/alias, which can be used to start the slideshow with the corresponding slide referencing from the URL.
The following example will start the slider with the second slide if we are using the slide alias cakes in the URL example.com/page/#cakes.
Below there are the available preset 2D / 3D transitions that you can use. Remember, you need to specify the ID of your selected transitions instead of their names.
Move your mouse over the transition names to view them in real-time.
2D slide transitions
ID
Transition name
ID
Transition name
3D slide transitions
ID
Transition name
ID
Transition name
Custom slide transitions
All the available preset transitions are stored in the layerslider.transitions.js file. You can modify this file to add your own transitions or change the default ones. It is storing a complex JSON object, thus modifying that file is not recommended for users without web development experience.
Please note, we have more than 200 slide transitions, which takes advantage of every capability of the plugin. You will most likely find a transition within the default ones that you are wanted to use custom transitions in the first place.
See the source
We are assuming your have programming experience since it is needed for making custom transitions, therefore we don't have any guides for this particular topic. See the source code of the layerslider.transitions.js file. It is pretty straightforward for people with web development experience, and we are using mostly the same properties that are available at many other places.
What is a layer?
Layers are the contents of slides. Unlike with conventional slider plugins, you can use multiple contents in a slide. These can be images, text, custom HTML, video and audio contents.
Adding a layer
You can add layers by appending standard HTML elements into slides with the ls-l class name. For image layers use the <img> element. For text/HTML layers use the appropriate element like <div>, <p>, <h1>, <h2>, <h3> etc. The highlighted lines are indicating new additions to our previous examples.
Layers are standard HTML elements, and you can set their initial positions with the style attribute.
One difference is, however, is that LayerSlider involves animations, and all your layers needs to be positioned manually with the top and left style properties. In the example below you can see the same layers with some style formatting added.
Notice the second layer with using percents. Percentage values in LayerSlider works a bit differently than web standards; LayerSlider will always place the center of layers to the given position instead of their sides. This makes easy to position layers exactly to the center by setting the values 50% 50%.
Sizing and wrapping text layers
By default text layers don't have fixed width so there could be strange anomalies while a text layer with lots of text is sliding in. In this case please add a width (in pixels or in percentage) to the layer.
Add the white-space: nowrap; style property to the layer if you don't want the slider to wrap the text into multiple lines.
Linking layers
You can link layers by wrapping them with a regular HTML <a> element. In this case, the <a> element becomes the layer itself, and you need to apply all the layer settings on that element instead of your "actual" layer.
You can link layers pointing to slides with the ls-linkto-<n> special class. Replace the <n> placeholder in the class name with the slider number you want to switch. When these layers are clicked the slider will immediately switch to the corresponding slide you are referencing for in the class name. See the example below.
<!-- slide -->
<div class="ls-slide">
<!-- slide background -->
<img src="..." class="ls-bg" alt="">
<!-- the slider will switch to the third slide when clicked -->
<img src="..." class="ls-l ls-linkto-3" data-ls="offsetxin: -100; fadein: false; rotatein: 90;" alt="layer image">
</div>
Creating a link to another slide
Embedding YouTube and Vimeo videos
You can include YouTube and Vimeo videos in slides by inserting their embed code into <div> layer. The embed code can be found on the corresponding video page on YouTube/Vimeo. LayerSlider will follow the dimensions specified in the embed code, thus you can also set them there. Alternatively, you can override it within your CSS stylesheets.
Embedding self-hosted videos involves the HTML5 <video> element. You can find a detailed guide on this MDN page. The principal is the same described above. Here is a modified example:
You can include self-hosted audio with the HTML5 <audio> element. You can find a detailed guide on this MDN page. The principal is the same described above. Here is a modified example:
The transition options can be set with the data-ls attribute in the same way as we used it for slides. Layers don't have any specific settings; all options are responsible for making unique transitions.
The horizontal offset to align the starting position of layers. Positive and negative numbers are allowed. Set left or right to position layers out of the slider.
offsetyin
offsetyout
top, bottom or a <num>
0
The vertical offset to align the starting position of layers. Positive and negative numbers are allowed. Set top or bottom to position layers out of the slider.
delayin
<num>
0
Delays the layer transitions with the specified amount of time in milliseconds.
showuntil
<num>
0
After animating in, the layer will be visible for the time you specify here, then it will animate out. You can use this setting for layers to leave the slide before the slide change or for example before other layers will slide in or out. This value in millisecs, so the value 1000 means 1 second.
durationin
durationout
<num>
1000
The duration of layer transitions.
easingin
easingout
easing_name
easeInOutQuint
The timing function used for transitions. See easings.net for more information.
fadein
fadeout
true, false
true
Fades in / out the layer during the transition.
rotatein
rotateout
<angle>
0
Rotates the layer clockwise from the given angle to zero degree. Negative values are allowed for anticlockwise rotation.
rotatexin
rotatexout
<angle>
0
Rotates the layer along the X (horizontal) axis from the given angle to zero degree. Negative values are allowed for reverse direction.
rotateyin
rotateyout
<angle>
0
Rotates the layer along the Y (vertical) axis from the given angle to zero degree. Negative values are allowed for reverse direction.
scalexin
scalexout
<num>
1
Scales the layer's width from the given value to its original size.
scaleyin
scaleyout
<num>
1
Scales the layer's height from the given value to its original size.
skewxin
skewxout
<angle>
0
Skews the layer along the X (horizontal) axis from the given angle to 0 degree. Negative values are allowed for reverse direction.
skewyin
skewyout
<angle>
0
Skews the layer along the Y (vertical) axis from the given angle to 0 degree. Negative values are allowed for reverse direction.
transformoriginin
transformoriginout
x y z
50% 50% 0
This option allows you to modify the origin for transformations of the layer according to its position. The three values represent the X, Y and Z axis in 3D space. OriginX can be left, center, right, a number or a percentage value. OriginY can be top, center, bottom, a number or a percentage value. OriginZ can be a number and corresponds the depth in 3D space.
Parallax layers
We added this nice feature to create a fancy parallax effect by moving your mouse over the slider. To use, you will need to add a special property called parallaxlevel to the layer.
This is a a really simple example slider that focuses on the main HTML markup for easier understanding. It containes only two slides and two layers in each slides. Please open the simplest-example.html file in a text editor to see the commented HTML markup of the slider.
This example show the main capabilities of LayerSlider API
Event reference
Event callbacks can be used to modify the slider behavior, or wire it up with external solutions. The following events can be defined in the slider initialization JavaScript code.
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 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.
Passed variables
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 have access all of the settings that the working is working with, and it also make possible to override some of them on-the-fly. Usually it is used to get the information related to slides and slideshow progression.
Example
Callback functions can be defined by passing them in the JavaScript initialization code.
data['prevLayerIndex'] = returns the index of the previous slide (not the layer)
data['curLayer'] = returns the jQuery object of the current slide (not the layer)
data['curLayerIndex'] = returns the index of the current slide (not the layer)
data['nextLayer'] = returns the jQuery object of the next slide (not the layer)
data['nextLayerIndex'] = returns the index of the next slide (not the layer)
data['isAnimating'] = returns true or false
data['layersNum'] = returns the number of slides (not the layers) in the slider
data['autoSlideshow'] = returns true or false
data['paused'] = returns true or false
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.
// ...
cbAnimStop : function(data) {
alert('The current slide is: ' + data['curLayerIndex']);
}
// ...
Callback with an API method
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.
Video issues
Symptom
Description
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.
Issues related to jQuery
Symptom
Description
Multiple jQuery issue
Your site has including the jQuery library twice or more. Please make sure that you removed the unnecessary versions.
Old jQuery issue
To maintain compatibility with new software versions and their new features, our plugins requires newer versions of the jQuery library. Usually, you can use them with jQuery 1.7, but we strongly recommend you to have at least version 1.8 or newer as some of the features of our plugins only works with those versions.
jQuery transit issue
Your site has including the jQuery Transit library twice or more. Please make sure that you removed the unnecessary versions.
Loading problems
Symptom
Description
The slider is not starting (no loading indicator)
There are maybe some JS errors on your site. Please check the slider init code and the code of the other scripts.
The slider is not starting (loading indicator)
One or more images are missing from the slider. Please make sure that you didn't mistype the image URLs.
Known incompatibilities
Cause
Description
FitVids JS
Your videos will have wrong dimensions if you apply FitVids on them within the slider.
Isotope
[SOLVED] Using Isotope and jQuery Transit on the same page caused some glitchy transitions.
Upgrading to version 5
LayerSlider had many changes and improvements since we released the first version two years ago. We always focused on the backwards compatibility but we had to make some decisions to get more professional.
Important changes
We made a lot of changes in version 5 and - as always - we tried to keep the slider compatible with the earlier versions (and when we say 'earlier versions' we are thinking mostly of the static HTML markup / init code of your sliders built in the past).
It is important to know that your existing sliders should work 99% the same as before (except the included resource files) but there could be differences in some special cases, but even of the backwards compatibility we recommend you to make your slider 100% version 5 compatible with the following guide.
Changes in the resource files
This is the only step that you must follow to get your existing sliders work with LayerSlider v5.
From version 5 LayerSlider is using the powerful Greensock Animation Engine for transitons so we removed jquery transit and easing.js
We made the slider more compatible and much faster with this change.
Changes in naming
From version 5 we are calling the slides to slides and the layers to layers. In earlier versions we called the slides to layers and the layers to sublayers. We know that the old naming was a little confusing (in the WordPress version of the plugin we are using the new namings for a long time ago).
Changes in the slider markup
Regarding to the name changes we changed some things in the slider markup.
As you can see we changed the class name of the slides from 'ls-layer' to 'ls-slide' and also the class names of the layers from 'ls-s .. ' to 'ls-l'. It is important to know that you don't need to add numbers in the layer class names any more (you can set the starting / ending distance in different way), just use 'ls-l' in any cases. The class names of the slide backgrounds and the slide linking elements didn't change.
The second improvement that we moved the slide- and layer-specific properties out of the style attribute. You can use the style attribute for positioning and styling like in normal cases but you should use the new 'data-ls' attribute (both on slides and layers) for adding transition properties. We think that the slider markup became cleaner and it is easier to work with.
Changed properties in the slider init code
earlier property name
new property name
sublayerContainer
layersContainer
firstLayer
firstSlide
animateFirstLayer
animateFirstSlide
Changes in slide transitions
The slider will not animate out the layers before the slide change so layer and slide transitions can happen at the same time. Many of our users will like this feature.
Changes in layer transitions
With the new Greensock Animation Engine layers can be animating with really unlimited ways. Layers can now fade + slide at the same time and they can rotate (in 2D or 3D), skew or scale too and you can set even the transform origin of the layer transitions if you like.
You can see the earlier transition options with the version 5 compatible equivalent side by side in the following list.
earlier options
values
new options
values
defaults
slidedirection
left, right top, bottom fade
offsetxin offsetyin fade
left, right or a <num> top, bottom or a <num> true, false
80 0 true
slideoutdirection
left, right top, bottom fade
offsetxout offsetyout fadeout
left, right or a <num> top, bottom or a <num> true, false
-80 0 true
durationin
<num>
durationin
<num>
1000
durationout
<num>
durationout
<num>
1000
delayin
<num>
delayin
<num>
0
delayout
<num>
removed (with showuntil you can control the out-animations of layers regarding to each other)
showuntil
<num>
showuntil
<num>
0
easingin
easing_name
easingin
easing_name
easingout
easing_name
easingout
easing_name
rotatein
<angle>
rotatein
rotateXin
rotateYin
<angle>
<angle>
<angle>
0
0
0
rotateout
<angle>
rotateout
rotateXout
rotateYout
<angle>
<angle>
<angle>
0
0
0
scalein
<num>
scalexin
scaleyin
<num>
<num>
1
1
scaleout
<num>
scalexout
scaleyout
<num>
<num>
1
1
N / A
skewxin
skewyin
<angle>
<angle>
0
0
N / A
skewxout
skewyout
<angle>
<angle>
0
0
N / A
transformoriginin
x y z
50% 50% 0
N / A
transformoriginout
x y z
50% 50% 0
You have a lot more transition options in the new version. The most important thing is that you can set the starting and ending offset positions (X,Y) of layers.
Description of the transition of the layer in this example:
Transition IN
starting position X : 450px (initial left property + offsetxin)
starting position Y : 270px (initial left property + offsetyin)
ending position X : 350px (initial left property)
ending position Y : 230px (initial top property)
The layer will stay at the initial position until transition out.
Transition OUT
starting position X : 350px (initial left property)
starting position Y : 230px (initial top property)
ending position X : 200px (initial left property + offsetxout)
ending position Y : 330px (initial left property + offsetyout)
With these options you can create complete axis-free slide transitions!
Please note, that fade is enabled by true so in the example above the layer will fade + slide at the same time. If you need the layer to slide only, you can use the fadein: false; fadeout: false; options. If you want the layer to fade only, you should use only the offsetxin: 0; offsetyin: 0; options (because fading is enabled and offsetyin / out are 0 by default).
If you want to start / end the transitions from / to outside of the slider, you can use the left / right values on the offsetxin / offsetxout, and top / bottom values on the offsetyin / offsetyout properties.
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 (Search for the "Email kreatura" box on the bottom right - in this case we will reply via email). We can answer your support questions only in these ways (please do not send us email directly).
IMPORTANT! For the fast troubleshooting, please send us detailed informations about the issue and make sure that you don't forget to send us your site url where you are using / want to use the item. Please note, that we cannot troubleshoot from screencast videos or screenshots.
Please take some time until we respond (usually in 24 - 48 hours).