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!

If you upgraded from any earlier version, please read this article about the changes carefully. If you purchased this version newly, you can skit this part.

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 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.
Project Homepage Comment
jQuery jquery.com The most popular JavaScript library for building complex web apps.
GreenSock greensock.com 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.
1
2
3
4
5
6
7
8
9
10
<!-- LayerSlider stylesheet -->
<link rel="stylesheet" href="/layerslider/css/layerslider.css" type="text/css">
<!-- External libraries: jQuery & GreenSock -->
<script src="/layerslider/js/jquery.js" type="text/javascript"></script>
<script src="/layerslider/js/greensock.js" type="text/javascript"></script>
<!-- LayerSlider script files -->
<script src="/layerslider/js/layerslider.transitions.js" type="text/javascript"></script>
<script src="/layerslider/js/layerslider.kreaturamedia.jquery.js" type="text/javascript"></script>
Including resources
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.
1
2
3
<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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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.
Slideshow properties
autoStart true false true Slideshow will automatically start after pages have loaded.
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.
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.
towWaySlideshow 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.
youtubePreview ‘maxresdefault.jpg’ ‘hqdefault.jpg’ ‘mqdefault.jpg’ ‘default.jpg’ ‘maxresdefault.jpg’ 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:
1
2
3
4
5
6
7
8
9
10
11
12
<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:
1
2
3
4
5
6
7
8
9
10
11
12
13
<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-widh 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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<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.
1
2
3
4
5
6
7
<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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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.
1
2
3
4
5
6
7
<div id="layerslider" style="width: 800px; height: 400px;">
<!-- slide with custom settings -->
<div class="ls-slide" data-ls="slidedelay: 4000;">
<img src="..." class="ls-bg" alt="Slide background">
</div>
</div>
A slide with specified settings

Slide options

Options Defaults Description
slidedelay 4000 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.
1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="layerslider" style="width: 800px; height: 400px;">
<!-- slide with custom settings -->
<div class="ls-slide" data-ls="slidedelay: 4000; transition2d: 2,7,9;">
<img src="..." class="ls-bg" alt="Slide background">
</div>
<!-- slide with custom settings -->
<div class="ls-slide" data-ls="slidedelay: 4000; transition3d: all;">
<img src="..." class="ls-bg" alt="Slide background">
</div>
</div>
Using some 2D transitions on a slide
Slide transitions will work only if a slide background image is added. Image layers we will add later in this guide will not work.

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.
1
2
3
4
5
6
7
8
9
10
<div id="layerslider" style="width: 800px; height: 400px;">
<!-- slide -->
<div class="ls-slide">
<!-- slide background -->
<img src="..." class="ls-bg" alt="Slide background">
</div>
</div>
Adding a slide background image
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.
1
2
3
4
5
6
7
8
9
10
<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.
1
2
3
4
5
6
7
8
9
<!-- 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.
1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="slider">
<!-- normal slide -->
<div class="ls-slide">
<img src="..." class="ls-bg" alt="">
</div>
<!-- deep linked slide -->
<div class="ls-slide" data-ls="deeplink: cakes;">
<img src="..." class="ls-bg" alt="">
</div>
</div>
Deep-linking a slide

List of transitions

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
1 Sliding from right 2 Sliding from left
3 Sliding from bottom 4 Sliding from top
5 Crossfading 6 Fading tiles forward
7 Fading tiles reverse 8 Fading tiles col-forward
9 Fading tiles col-reverse 10 Fading tiles (random)
11 Smooth fading from right 12 Smooth fading from left
13 Smooth fading from bottom 14 Smooth fading from top
15 Smooth sliding from right 16 Smooth sliding from left
17 Smooth sliging from bottom 18 Smooth sliding from top
19 Sliding tiles to right (random) 20 Sliding tiles to left (random)
21 Sliding tiles to bottom (random) 22 Sliding tiles to top (random)
23 Sliding random tiles to random directions 24 Sliding rows to right (forward)
25 Sliding rows to right (reverse) 26 Sliding rows to right (random)
27 Sliding rows to left (forward) 28 Sliding rows to left (reverse)
29 Sliding rows to left (random) 30 Sliding rows from top to bottom (forward)
31 Sliding rows from top to bottom (random) 32 Sliding rows from bottom to top (reverse)
33 Sliding rows from bottom to top (random) 34 Sliding columns to bottom (forward)
35 Sliding columns to bottom (reverse) 36 Sliding columns to bottom (random)
37 Sliding columns to top (forward) 38 Sliding columns to top (reverse)
39 Sliding columns to top (random) 40 Sliding columns from left to right (forward)
41 Sliding columns from left to right (random) 42 Sliding columns from right to left (reverse)
43 Sliding columns from right to left (random) 44 Fading and sliding tiles to right (random)
45 Fading and sliding tiles to left (random) 46 Fading and sliding tiles to bottom (random)
47 Fading and sliding tiles to top (random) 48 Fading and sliding random tiles to random directions
49 Fading and sliding tiles from top-left (forward) 50 Fading and sliding tiles from bottom-right (reverse)
51 Fading and sliding tiles from top-right (random) 52 Fading and sliding tiles from bottom-left (random)
53 Fading and sliding rows to right (forward) 54 Fading and sliding rows to right (reverse)
55 Fading and sliding rows to right (random) 56 Fading and sliding rows to left (forward)
57 Fading and sliding rows to left (reverse) 58 Fading and sliding rows to left (random)
59 Fading and sliding rows from top to bottom (forward) 60 Fading and sliding rows from top to bottom (random)
61 Fading and sliding rows from bottom to top (reverse) 62 Fading and sliding rows from bottom to top (random)
63 Fading and sliding columns to bottom (forward) 64 Fading and sliding columns to bottom (reverse)
65 Fading and sliding columns to bottom (random) 66 Fading and sliding columns to top (forward)
67 Fading and sliding columns to top (reverse) 68 Fading and sliding columns to top (random)
69 Fading and sliding columns from left to right (forward) 70 Fading and sliding columns from left to right (random)
71 Fading and sliding columns from right to left (reverse) 72 Fading and sliding columns from right to left (random)
73 Carousel 74 Carousel rows
75 Carousel cols 76 Carousel tiles horizontal
77 Carousel tiles vertical 78 Carousel-mirror tiles horizontal
79 Carousel-mirror tiles vertical 80 Carousel mirror rows
81 Carousel mirror cols 82 Turning tile from left
83 Turning tile from right 84 Turning tile from top
85 Turning tile from bottom 86 Turning tiles from left
87 Turning tiles from right 88 Turning tiles from top
89 Turning tiles from bottom 90 Turning rows from top
91 Turning rows from bottom 92 Turning cols from left
93 Turning cols from right 94 Flying rows from left
95 Flying rows from right 96 Flying cols from top
97 Flying cols from bottom 98 Flying and rotating tile from left
99 Flying and rotating tile from right 100 Flying and rotating tiles from left
101 Flying and rotating tiles from right 102 Flying and rotating tiles from random
103 Scaling tile in 104 Scaling tile from out
105 Scaling tiles random 106 Scaling tiles from out random
107 Scaling in and rotating tiles random 108 Scaling and rotating tiles from out random
109 Mirror-sliding tiles diagonal 110 Mirror-sliding rows horizontal
111 Mirror-sliding rows vertical 112 Mirror-sliding cols horizontal
113 Mirror-sliding cols vertical

3D slide transitions

ID Transition name ID Transition name
1 Spinning tile to right (180°) 2 Spinning tile to left (180°)
3 Spinning tile to bottom (180°) 4 Spinning tile to top (180°)
5 Spinning tiles to right (180°) 6 Spinning tiles to left (180°)
7 Spinning tiles to bottom (180°) 8 Spinning tiles to top (180°)
9 Horizontal spinning tiles random (180°) 10 Vertical spinning tiles random (180°)
11 Scaling and spinning tiles to right (180°) 12 Scaling and spinning tiles to left (180°)
13 Scaling and spinning tiles to bottom (180°) 14 Scaling and spinning tiles to top (180°)
15 Scaling and horizontal spinning tiles random (180°) 16 Scaling and vertical spinning tiles random (180°)
17 Spinning rows to right (180°) 18 Spinning rows to left (180°)
19 Spinning rows to bottom (180°) 20 Spinning rows to top (180°)
21 Horizontal spinning rows random (180°) 22 Vertical spinning rows random (180°)
23 Vertical spinning rows random (540°) 24 Scaling and spinning rows to right (180°)
25 Scaling and spinning rows to left (180°) 26 Scaling and spinning rows to bottom (180°)
27 Scaling and spinning rows to top (180°) 28 Scaling and horizontal spinning rows random (180°)
29 Scaling and vertical spinning rows random (180°) 30 Spinning columns to right (180°)
31 Spinning columns to left (180°) 32 Spinning columns to bottom (180°)
33 Spinning columns to top (180°) 34 Horizontal spinning columns random (180°)
35 Vertical spinning columns random (180°) 36 Horizontal spinning columns random (540°)
37 Scaling and spinning columns to right (180°) 38 Scaling and spinning columns to left (180°)
39 Scaling and spinning columns to bottom (180°) 40 Scaling and spinning columns to top (180°)
41 Scaling and horizontal spinning columns random (180°) 42 Scaling and vertical spinning columns random (180°)
43 Drunk colums scaling and spinning to right (180°) 44 Drunk colums scaling and spinning to left (180°)
45 Turning cuboid to right (90°) 46 Turning cuboid to left (90°)
47 Turning cuboid to bottom (90°) 48 Turning cuboid to top (90°)
49 Scaling and turning cuboid to right (90°) 50 Scaling and turning cuboid to left (90°)
51 Scaling and turning cuboids to right (90°) 52 Scaling and turning cuboids to left (90°)
53 Scaling and turning cuboids to bottom (90°) 54 Scaling and turning cuboids to top (90°)
55 Scaling and horizontal turning cuboids random (90°) 56 Scaling and vertical turning cuboids random (90°)
57 Turning rows to right (90°) 58 Turning rows to left (90°)
59 Horizontal turning rows random (90°) 60 Scaling and turning rows to right (90°)
61 Scaling and turning rows to left (90°) 62 Scaling and turning rows to bottom (90°)
63 Scaling and turning rows to top (90°) 64 Scaling and horizontal turning rows random (90°)
65 Scaling and vertical turning rows random (90°) 66 Scaling and horizontal turning drunk rows to right (90°)
67 Scaling and horizontal turning drunk rows to left (90°) 68 Turning columns to bottom (90°)
69 Turning columns to top (90°) 70 Vertical turning columns random (90°)
71 Scaling and turning columns to bottom (90°) 72 Scaling and turning columns to top (90°)
73 Scaling and turning columns to right (90°) 74 Scaling and turning columns to left (90°)
75 Scaling and horizontal turning columns random (90°) 76 Scaling and vertical turning columns random (90°)
77 Scaling and vertical turning drunk columns to right (90°) 78 Scaling and vertical turning drunk columns to left (90°)
79 Spinning cuboid to right (180°, large depth) 80 Spinning cuboid to left (180°, large depth)
81 Spinning cuboid to bottom (180°, large depth) 82 Spinning cuboid to top (180°, large depth)
83 Scaling and spinning cuboids to right (180°, large depth) 84 Scaling and spinning cuboids to left (180°, large depth)
85 Scaling and spinning cuboids to bottom (180°, large depth) 86 Scaling and spinning cuboids to top (180°, large depth)
87 Scaling and horizontal spinning cuboids random (180°, large depth) 88 Scaling and vertical spinning cuboids random (180°, large depth)
89 Scaling and spinning rows to right (180°, large depth) 90 Scaling and spinning rows to left (180°, large depth)
91 Scaling and spinning rows to bottom (180°, large depth) 92 Scaling and spinning rows to top (180°, large depth)
93 Scaling and horizontal spinning rows random (180°, large depth) 94 Scaling and vertical spinning rows random (180°, large depth)
95 Scaling and spinning columns to bottom (180°, large depth) 96 Scaling and spinning columns to top (180°, large depth)
97 Scaling and spinning columns to right (180°, large depth) 98 Scaling and spinning columns to left (180°, large depth)
99 Scaling and horizontal spinning columns random (180°, large depth) 100 Scaling and vertical spinning columns random (180°, large depth)

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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="layerslider" style="width: 800px; height: 400px;">
<!-- slide -->
<div class="ls-slide" data-ls="slidedelay: 4000; transition2d: 2,7,9;">
<!-- slide background -->
<img src="..." class="ls-bg" alt="Slide thumbnail">
<!-- image layer -->
<img src="..." class="ls-l" alt="Image layer">
<!-- text layer -->
<h3 class="ls-l">I'm a text layer!</h3>
</div>
</div>
Adding different types of layers into a slide

Positioning layers

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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="layerslider" style="width: 800px; height: 400px;">
<!-- slide -->
<div class="ls-slide" data-ls="slidedelay: 4000; transition2d: 2,7,9;">
<!-- slide background -->
<img src="..." class="ls-bg" alt="Slide thumbnail">
<!-- image layer -->
<img src="..." class="ls-l" style="top: 10px; left: 10px;" alt="Image layer">
&lt;!-- text layer --&gt;
<h3 class="ls-l" style="top: 50%; left: 50%; font-size: 18px;">I'm a text layer!</h3>
</div>
</div>
Positioning layers with using of style attributes

Additional notes

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.
1
2
3
4
5
6
7
8
9
10
11
<!-- Slide -->
<div class="ls-slide">
<!-- A regular slide background -->
<img src="..." class="ls-bg" alt="">
<!-- Linking an image -->
<a href="http://example.com" class="ls-l" data-ls="offsetxin: -100; fadein: false; rotatein: 90;">
<img src="..." alt="layer image">
</a>
</div>
Linking a layer

Creating a link to another slide in the slider

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.
1
2
3
4
5
6
7
8
9
<!-- 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.
1
2
3
4
5
6
7
8
9
10
11
<!-- Slide -->
<div class="ls-slide">
<!-- A regular slide background -->
<img src="..." class="ls-bg" alt="">
<!-- YouTube/Vimeo video -->
<div class="ls-l" data-ls="offsetxin: 0; offsetyin: 0;">
<iframe width="560" height="315" src="//www.youtube.com/embed/lX6JcybgDFo" frameborder="0" allowfullscreen></iframe>
</div>
</div>
Embedding YouTube video

Embedding (optionally self-hosted) HTML5 videos

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:
1
2
3
4
5
6
7
8
9
10
11
<!-- Slide -->
<div class="ls-slide">
<!-- A regular slide background -->
<img src="..." class="ls-bg" alt="">
<!-- Self-hosted HTML5 video -->
<div class="ls-l" data-ls="offsetxin: 0; offsetyin: 0;">
<video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls></video>
</div>
</div>
Embedding HTML5 video

Adding (optionally self-hosted) HTML5 audio

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:
1
2
3
4
5
6
7
8
9
10
11
<!-- Slide -->
<div class="ls-slide">
<!-- A regular slide background -->
<img src="..." class="ls-bg" alt="">
<!-- Self-hosted HTML5 audio -->
<div class="ls-l" data-ls="offsetxin: 0; offsetyin: 0;">
<audio src="/test/audio.ogg"></audio>
</div>
</div>
Adding HTML5 audio

Layer transitions

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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="layerslider" style="width: 800px; height: 400px;">
<!-- slide -->
<div class="ls-slide" data-ls="slidedelay: 4000; transition2d: 2,7,9;">
<!-- slide background -->
<img src="..." class="ls-bg" alt="Slide thumbnail">
<!-- image layer -->
<img src="..." class="ls-l" data-ls="offsetxin: left; rotatein: 90;" style="top: 10px; left: 10px;" alt="Image layer">
<!-- text layer -->
<h3 class="ls-l" data-ls="offsetxin: 0; offsetyin: -30;" style="top: 50%; left: 50%;">I'm a text layer!</h3>
</div>
</div>
Adding transition options to layers
Option Values Defaults Description
offsetxin offsetxout left, right or a <num> 80 -80 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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="layerslider" style="width: 800px; height: 400px;">
<!-- slide -->
<div class="ls-slide" data-ls="slidedelay: 4000; transition2d: 2,7,9;">
<!-- slide background -->
<img src="..." class="ls-bg" alt="Slide thumbnail">
<!-- image layer -->
<img src="..." class="ls-l" data-ls="parallaxlevel: 5;" alt="Image layer">
<!-- text layer -->
<h3 class="ls-l" data-ls="parallaxlevel: -1;" style="top: 50%; left: 50%;">I'm a text layer!</h3>
</div>
</div>
Using parallax layers
You can use both positive or negative values (for opposite directions).
Click on the names of examples to open them.
Example Description
Simple example 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.
Responsive demo slider The new demo slider made for version 5.0.0
Full width demo slider Full width demo slider
Carousel Carousel demo slider
Previous version 2D demo slider One of our previous demo sliders with 2D transitions
Previous version 3D demo slider One of our previous demo sliders with 3D transitions
Content slider Content slider example
Full size example Full size slider example
API demo 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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//Initialize the slider as usual
$('#slider').layerSlide({
autoStart : false,
firstSlide : 3,
// Adding callbacks
cbInit : function() {
// Custom code
},
cbAnimStop : function() {
// Custom code
}
});
Setting custom API callback functions

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 Return the slider data object var data = $(‘#slider’).layerSlider(‘data’);

Switch slides with custom controls

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

List of data object properties

Paste this code snippet into a callback function to see the contents of the LayerSlider data object in the console of your browser.
1
2
3
for(key in data) {
console.log(key + ' = ' + data[key]);
}
Getting the slider data object
The most important properties are the following:
  • 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.
1
2
3
4
5
// ...
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
1
2
3
4
5
6
7
8
9
10
11
<!-- LayerSlider stylesheet -->
<link rel="stylesheet" href="/layerslider/css/layerslider.css" type="text/css">
<!-- External libraries: jQuery, easing.js & jQuery Transit -->
<script src="/layerslider/jQuery/jquery.js" type="text/javascript"></script>
<script src="/layerslider/jQuery/jquery-easing-1.3.js" type="text/javascript"></script>
<script src="/layerslider/jQuery/jquery-transit-modified.js" type="text/javascript"></script>
<!-- LayerSlider script files -->
<script src="/layerslider/js/layerslider.transitions.js" type="text/javascript"></script>
<script src="/layerslider/js/layerslider.kreaturamedia.jquery.js" type="text/javascript"></script>
Including resources in earlier versions
1
2
3
4
5
6
7
8
9
10
<!-- LayerSlider stylesheet -->
<link rel="stylesheet" href="/layerslider/css/layerslider.css" type="text/css">
<!-- External libraries: jQuery & GreenSock -->
<script src="/layerslider/js/jquery.js" type="text/javascript"></script>
<script src="/layerslider/js/greensock.js" type="text/javascript"></script>
<!-- LayerSlider script files -->
<script src="/layerslider/js/layerslider.transitions.js" type="text/javascript"></script>
<script src="/layerslider/js/layerslider.kreaturamedia.jquery.js" type="text/javascript"></script>
Including resources from version 5
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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="layerslider" style="width: 1000px; height: 500px;">
<div class="ls-layer" style="transition2d: 2,5,23; slidedelay: 5000;">
<img class="ls-bg" src="..." />
<a class="ls-s-1" href="..." style="top: 20px; left: 100px; slidedirection: fade; durationin: 3000; easingin: linear;">some linked text</a>
<img class="ls-s-3" src="..." style="top: 50%; left: 20%; slideoutdirection: top; durationout: 1670; easingout: easeinoutquad;" />
</div>
<div class="ls-layer" style="transition3d: 33,15; slidedelay: 4000;">
<img class="ls-bg" src="..." />
<p class="ls-s-2" style="top: 40px; left: 600px; width: 200px; slideoutdirection: bottom; durationout: 500; easingout: easeinback;">some text</p>
<a class="ls-link" href="..."></a>
</div>
</div>
Slider markup in earlier versions
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<div id="layerslider" style="width: 1000px; height: 500px;">
<!-- First slide -->
<div class="ls-slide" data-ls="transition2d: 2,5,23; slidedelay: 5000;">
<!-- Slide background -->
<img class="ls-bg" src="..." />
<!-- First layer -->
<a class="ls-l" href="..." style="top: 20px; left: 100px;" data-ls="offsetxin: 0; offsetyin: 0; fadein: true; durationin: 3000; easingin: linear;">some linked text</a>
<!-- Second layer -->
<img class="ls-l" src="..." style="top: 50%; left: 20%;" data-ls="offsetyout: top; durationout: 1670; easingout: easeinoutquad;" />
</div>
<!-- Second slide -->
<div class="ls-slide" data-ls="transition3d: 33,15; slidedelay: 4000;">
<!-- Slide background -->
<img class="ls-bg" src="..." />
<!-- First layer -->
<p class="ls-l" style="top: 40px; left: 600px; width: 200px;" data-ls="offsetxout: 0; offsetyout: bottom; fadeout: false; durationout: 500; easingout: easeinback;">some text</p>
<!-- Linking the whole slide -->
<a class="ls-link" href="..."></a>
</div>
</div>
Slider markup from version 5
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.
1
2
3
4
5
6
7
<div class="ls-slide">
<img class="ls-l" src="..."
style="left: 350px; top: 230px;"
data-ls="offsetxin: 100; offsetyin: 40; offsetxout: -150; offsetyout: 100;" />
</div>
Using the offset layer transition options
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.

Important

If you upgraded from earlier (1.x – 4.x) versions, please read this article about the changes carefully!

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 not detecting viewport changes in some cases, especially while changing orientation on mobile devices.

Changes in version 5.2.0

  • Fixed some appearance issues
  • Fixed broken autoplay feature of HTML5 videos
  • Fixed an issue that caused background flickering in some cases
  • Video layers are ignoring showUntil parameter while playing
  • The slider won’t hang up if an image layer couldn’t be loaded
  • The duration of a layer cannot be 0ms (this value will be automatically changed to 1ms)
  • Added new options into the LayerSlider API:
    • prevLayerIndex – The index of the previous slide (curLayerIndex is also fixed)
    • userInitData – Returns the object of the slider options which has been set by the user in the init code
    • defaultInitData – Returns the full list of the default slider options
  • Added new slider options, which can be used in the init code:
    • sliderFadeInDuration – The duration of the fade transition when the slider is showing up for the first time on page load
    • startInViewport – The slider will start only if it enters into the viewport
    • hideOnMobile – Hides the slider on mobile devices
    • hideUnder – Hides the slider under the given value of browser width in pixels
    • hideOver – Hides the slider over the given value of browser width in pixel

Changes in version 5.1.2

  • Fixed 3D transitions in the latest versions of Chrome

Changes in version 5.1.0

  • Fixed several issues with embedded videos (mostly under Firefox and IE)
  • Fixed the autoplay parameter in embedded youtube videos
  • Fixed another HTML5 video sizing issue

Changes in version 5.0.2

  • Fixed HTML5 video sizing issue

Changes in version 5.0.1

  • Fixed layer transitions if there are no slide background images
  • Fixed the starting position of layers with percentage value of width

What’s new in version 5.0.0?

  • New features
    • Parallax Layers – a fancy parallax effect by mouse move
    • New layer transitions: rotateX, rotateY and skew with option to set transformOrigin
    • Added (self-hosted) HTML5 video and audio support
    • Added a new skin
  • Changes
    • Using Greensock Animation Engine instead of jQuery Transit + easings.js
    • Changes the naming of layers and slides
    • Changes in the HTML markup of the slider
    • Changed some properties in the init code
    • Slides and layers can now animating at the same time
    • Layers can now fade + slide at the same time
    • Changed some properties in the layer transitions
  • Improvements
    • 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
  • Fixes
    • Fixed the ‘1px slide transition bug’

Changes in previous versions

4.6.1

  • Fixed flashing PNG backgrounds

4.6.0

  • Fixed the jQuery version check issue with 1.10+ releases
  • Fixed responsiveness with only one slide in the slider
  • Resolved the Isotope and jQuery Transit incompatibility
  • Fixed linked layers in older versions of Internet Explorer
  • Fixed the ‘Video Quality’ settings field
  • The slider is now skipping transitions if there is no background image to animate
  • Lots of minor fixes and other improvements

4.5.5

  • Improvement: fixed issues in responsiveness when you resize the browser during a transition
  • Improvement: the circle timer now uses a cool hiding animation
  • Improvement: the thumbnail navigation now always stays visible no matter what transition you use
  • Improvement: Improved HTTPS support with videos
  • Bug fix: Fixed the tiled layers with older versions of jQuery
  • Bug fix: Fixed the shadow position in some cases

4.5.0

  • New features
    • Added 4 new skins
    • Added 41 additional 2D transitions with semi-3D effects
    • Added bar and circle timers
    • Added scale and rotate options for sublayers animations
  • Improvements
    • Major performance improvements
    • The new transitions now can animate to the opposite direction depending on the user interaction and the “two way slideshow” feature
    • Responsiveness now can handle images with custom dimensions
    • A full-width slider now will enlarge the background image if needed
    • In older versions of Internet Explorer we are now allow fade effects
    • Improvements in the LayerSlider Debug Mode
  • Fixes
    • Fixed the “link the whole slide” issue under older versions of Internet Explorer
    • Fixed an issue which resulted the loading indicator to appear during slide changes
    • Several fixes with the navigation area
    • Several fixes with the old and new transitions

4.1.0

  • Fixed video issues in Firefox
  • Fixed an issue that caused slowness in the transition gallery
  • Fixed an issue with the “animateFirstLayer” that caused the slideshow to stop
  • Fixed an issue with the cbAnimStop if there is only one layer
  • Added jQuery version number check
  • Fixed an issue that caused the LayerSlider notices to embed each other
  • Fixed some style settings
  • Improved documentation

4.0.1

  • Improved CSS overrides to prevent the theme applying global CSS style settings on the slider and its elements
  • Fixed an issue which caused the slider to freeze if the navigation area was set to hidden

4.0

  • New features
    • We added new transition feature with more than 200 predefined 2D and 3D transitions
    • We are now using hardware acceleration to give you killer performance on mobile devices
    • Added loading indicator
  • Improvements
    • Improved “Animate first layer” feature, it doesn’t animate the background now
    • We are now support the value “-1″ for distance level to position your sublayers exactly outside of the layer ( class=”ls-s-1”)
    • You can add percentage values of the width and height of your sublayers
    • Full jQuery 1.9 compatibility
    • Improved various style settings
  • Fixes
    • Fixed an issue in linked sublayers with fade effect which resulted the sublayer disappearance
    • Fixed an issue on mobile devices regarding the thumbnail images touch detection
    • Fixed an issue in the LayerSlider API when the “data” object wasn’t passed for some callback functions
    • Fixed an issue in the cbAnimStop() callback function of the LayerSlider API which contained some invalid values regarding the slides

If you get stuck…

Before contacting us, please make sure that you: 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).

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

Leave a Reply

Your email address will not be published. Required fields are marked *