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 | <link rel="stylesheet" href="/layerslider/css/layerslider.css" type="text/css">
<script src="/layerslider/js/jquery.js" type="text/javascript"></script>
<script src="/layerslider/js/greensock.js" type="text/javascript"></script>
<script src="/layerslider/js/layerslider.transitions.js" type="text/javascript"></script>
<script src="/layerslider/js/layerslider.kreaturamedia.jquery.js" type="text/javascript"></script>
|
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;">
</div>
|
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">
$(document).ready(function(){
$('#layerslider').layerSlider({
});
});
</script>
|
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">
$(document).ready(function(){
$('#layerslider').layerSlider({
autoStart: false,
firstLayer: 2,
skin: 'borderlesslight',
skinsPath: '/static/layerslider/skins/'
});
});
</script>
|
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. |
| 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">
$(document).ready(function(){
$('#layerslider').layerSlider({
responsive : false
});
});
</script>
|
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">
$(document).ready(function(){
$('#layerslider').layerSlider({
responsiveUnder : 960,
layersContainer : 960
});
});
</script>
|
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.
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%;">
</div>
</body>
</html>
|
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;">
<div class="ls-slide">
</div>
</div>
|
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;">
<div class="ls-slide">
</div>
<div class="ls-slide">
</div>
<div class="ls-slide">
</div>
</div>
|
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;">
<div class="ls-slide" data-ls="slidedelay: 4000;">
<img src="..." class="ls-bg" alt="Slide background">
</div>
</div>
|
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;">
<div class="ls-slide" data-ls="slidedelay: 4000; transition2d: 2,7,9;">
<img src="..." class="ls-bg" alt="Slide background">
</div>
<div class="ls-slide" data-ls="slidedelay: 4000; transition3d: all;">
<img src="..." class="ls-bg" alt="Slide background">
</div>
</div>
|
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.
1 2 3 4 5 6 7 8 9 10 | <div id="layerslider" style="width: 800px; height: 400px;">
<div class="ls-slide">
<img src="..." class="ls-bg" alt="Slide background">
</div>
</div>
|
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;">
<div class="ls-slide">
<img src="..." class="ls-tn" alt="Slide thumbnail">
</div>
</div>
|
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.
1 2 3 4 5 6 7 8 9 | <div class="ls-slide">
<img src="..." class="ls-bg" alt="">
</div>
|
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">
<div class="ls-slide">
<img src="..." class="ls-bg" alt="">
</div>
<div class="ls-slide" data-ls="deeplink: cakes;">
<img src="..." class="ls-bg" alt="">
</div>
</div>
|
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
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;">
<div class="ls-slide" data-ls="slidedelay: 4000; transition2d: 2,7,9;">
<img src="..." class="ls-bg" alt="Slide thumbnail">
<img src="..." class="ls-l" alt="Image layer">
<h3 class="ls-l">I'm a text layer!</h3>
</div>
</div>
|
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;">
<div class="ls-slide" data-ls="slidedelay: 4000; transition2d: 2,7,9;">
<img src="..." class="ls-bg" alt="Slide thumbnail">
<img src="..." class="ls-l" style="top: 10px; left: 10px;" alt="Image layer">
<!-- text layer -->
<h3 class="ls-l" style="top: 50%; left: 50%; font-size: 18px;">I'm a text layer!</h3>
</div>
</div>
|
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 | <div class="ls-slide">
<img src="..." class="ls-bg" alt="">
<a href="http://example.com" class="ls-l" data-ls="offsetxin: -100; fadein: false; rotatein: 90;"> <img src="..." alt="layer image">
</a>
</div>
|
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 | <div class="ls-slide">
<img src="..." class="ls-bg" alt="">
<img src="..." class="ls-l ls-linkto-3" data-ls="offsetxin: -100; fadein: false; rotatein: 90;" alt="layer image">
</div>
|
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 | <div class="ls-slide">
<img src="..." class="ls-bg" alt="">
<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 (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 | <div class="ls-slide">
<img src="..." class="ls-bg" alt="">
<div class="ls-l" data-ls="offsetxin: 0; offsetyin: 0;">
<video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls></video> </div>
</div>
|
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 | <div class="ls-slide">
<img src="..." class="ls-bg" alt="">
<div class="ls-l" data-ls="offsetxin: 0; offsetyin: 0;">
<audio src="/test/audio.ogg"></audio>
</div>
</div>
|
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;">
<div class="ls-slide" data-ls="slidedelay: 4000; transition2d: 2,7,9;">
<img src="..." class="ls-bg" alt="Slide thumbnail">
<img src="..." class="ls-l" data-ls="offsetxin: left; rotatein: 90;" style="top: 10px; left: 10px;" alt="Image layer">
<h3 class="ls-l" data-ls="offsetxin: 0; offsetyin: -30;" style="top: 50%; left: 50%;">I'm a text layer!</h3>
</div>
</div>
|
| 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;">
<div class="ls-slide" data-ls="slidedelay: 4000; transition2d: 2,7,9;">
<img src="..." class="ls-bg" alt="Slide thumbnail">
<img src="..." class="ls-l" data-ls="parallaxlevel: 5;" alt="Image layer">
<h3 class="ls-l" data-ls="parallaxlevel: -1;" style="top: 50%; left: 50%;">I'm a text layer!</h3>
</div>
</div>
|
You can use both positive or negative values (for opposite directions).
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 | $('#slider').layerSlider({
autoStart : false,
firstSlide : 3,
cbInit : function() {
},
cbAnimStop : function() {
}
});
|
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 slide. |
$('#slider').layerSlider('next'); |
| prev |
The slider will change the previous slide. |
$('#slider').layerSlider('prev'); |
| stop |
Will stop the slideshow. |
$('#slider').layerSlider('stop'); |
| start |
Will continue or start the slideshow. |
$('#slider').layerSlider('start'); |
| data |
Returns the slider data object |
var data = $('#slider').layerSlider('data'); |
| userInitData |
Returns the object of the slider options which has been set by the user in the init code |
var data = $('#slider').layerSlider('userInitData'); |
| defaultInitData |
Returns the full list of the default slider options |
var data = $('#slider').layerSlider('defaultInitData'); |
Switch slides with custom controls
1 | <a href="javascript:void(0);" onclick="$('#layerslider').layerSlider(2);">Change to slide 2</a>
|
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]);
}
|
The most important properties are the following:
-
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.
1 2 3 4 5 | cbAnimStop : function(data) {
alert('The current slide is: ' + data['curLayerIndex']);
}
|
Custom navigation area
On this page you can find a complete example for building a custom navigation area. Please note, this example involves other programming languages such as CSS, HTML and DOM manipulation, and it requires web development experience.
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
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 | <link rel="stylesheet" href="/layerslider/css/layerslider.css" type="text/css">
<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>
<script src="/layerslider/js/layerslider.transitions.js" type="text/javascript"></script>
<script src="/layerslider/js/layerslider.kreaturamedia.jquery.js" type="text/javascript"></script>
|
1 2 3 4 5 6 7 8 9 10 | <link rel="stylesheet" href="/layerslider/css/layerslider.css" type="text/css">
<script src="/layerslider/js/jquery.js" type="text/javascript"></script>
<script src="/layerslider/js/greensock.js" type="text/javascript"></script>
<script src="/layerslider/js/layerslider.transitions.js" type="text/javascript"></script>
<script src="/layerslider/js/layerslider.kreaturamedia.jquery.js" type="text/javascript"></script>
|
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>
|
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;">
<div class="ls-slide" data-ls="transition2d: 2,5,23; slidedelay: 5000;">
<img class="ls-bg" src="..." />
<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>
<img class="ls-l" src="..." style="top: 50%; left: 20%;" data-ls="offsetyout: top; durationout: 1670; easingout: easeinoutquad;" />
</div>
<div class="ls-slide" data-ls="transition3d: 33,15; slidedelay: 4000;">
<img class="ls-bg" src="..." />
<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>
<a class="ls-link" href="..."></a>
</div>
</div>
|
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>
|
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.