LayerSlider documentation

Thank you

Thank you for purchasing this product. If you have any questions that are beyond the scope of this documentation, please feel free to email us.

About the item

LayerSlider is a premium multi-purpose slider for creating image galleries, content sliders, and mind-blowing slideshows with must-see effects. It uses cutting edge technologies to provide the smoothest experience that’s possible, and it comes with more than 200 preset 2D and 3D slide transitions. It’s device friendly by supporting responsive mode, multiple layouts, touch gestures on mobile devices, and uses techniques like lazy load for optimal performance. You can add any content, including images, text, custom HTML, YouTube and Vimeo videos or HTML5 self-hosted multimedia contents. It’s also SEO friendly by allowing you to build semantic markup with custom attributes that search engines can index easily. LayerSlider comes with 13 built-in skins, and it has tons of options to entirely customize the appearance and behavior of your sliders at the smallest detail.

Upgrading to version 5 - important changes compared to earlier versions!

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.

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

					<div id="layerslider" style="width: 800px; height: 400px;">
						<!-- The contents on your slider will be here -->
					</div>

Adding a slider on a page

The initial size of the slider is defined in the style attribute. You can change those values to specify your preferred dimensions. Also, notice the id attribute. We will use its value (layerslider) as a reference throughout this guide.

It is important to use the style attribute to define the slider dimensions.

Slider setup

You should initialize the slider plugin by calling the layerslider() method on the target element. Since we used the "layerslider" ID in our sample markup, we get that by jQuery and initialize LayerSlider on that element. See the following example:

					<script type="text/javascript">

						// Running the code when the document is ready
						$(document).ready(function(){

							// Calling LayerSlider on the target element
							$('#layerslider').layerSlider({

								// Slider options goes here,
								// please check the 'List of slider options' section in the documentation
							});
						});

					</script>

Initializing the plugin

This code is placed usually after the closing </body> tag but the most important thing is that it must be placed after the included resource script files.

Remove the <script> wrapper element if you will use this code in an external JavaScript file.

Configuring the slider

LayerSlider has several options to customize your sliders. These options can be defined by passing an object with your changed values. The nex example shows how to include some custom properties.

					<script type="text/javascript">

						// Running the code when the document is ready
						$(document).ready(function(){

							// Calling LayerSlider on the target element with adding custom slider options
							$('#layerslider').layerSlider({
								autoStart: false,
								firstLayer: 2,
								skin: 'borderlesslight',
								skinsPath: '/static/layerslider/skins/'

								// Please make sure that you didn't forget to add a comma to the line endings
								// except the last line!
							});
						});

					</script>

Initializing the plugin with custom slider options

List of the available slider options

Layout properties	Values	Defaults	Description
responsive	true false	true	Responsive mode provides optimal viewing experience across a wide range of devices (from desktop to mobile) by adapting and scaling your sliders for the viewing environment.
responsiveUnder	<num>	0 (disabled)	Turns on responsiveness under a specified value of width. Useful on full width sliders. If using this, the normal responsive property should be set to false!
layersContainer	<num>	0 (disabled)	Creates an invisible inner container with the given dimension in pixels to hold and center your layers.
hideOnMobile	true false	false	Hides the slider on mobile devices.
hideUnder	<num>	0	Hides the slider under the given value of browser width in pixels.
hideOver	<num>	100000	Hides the slider over the given value of browser width in pixel.
Slideshow properties
autoStart	true false	true	Slideshow will automatically start after pages have loaded.
startInViewport	true false	true	The slider will start only if it enters into the viewport.
pauseOnHover	true false	true	Slideshow will temporally pause when someone moves the mouse cursor over the slider.
firstSlide	number 'random'	1	The slider will start with the specified slide.
animateFirstSlide	true false	true	Disabling this option will result a static starting slide for the fisrt time on page load.
sliderFadeInDuration	<num>	350	The duration of the fade transition (in ms) when the slider is showing up for the first time on page load.
loops	<num>	0	Number of loops if automatically start slideshow is enabled (0 means infinite!)
forceLoopNum	true false	true	The slider will always stop at the given number of loops, even if someone restarts slideshow.
twoWaySlideshow	true false	false	Slideshow can go backwards if someone switch to a previous slide.
randomSlideshow	true false	false	If true, LayerSlider will change to a random slide. Please note that 'loops' feature won't work with randomSlideshow!.
Appearance properties
skin	'skin_name'	'v5'	You can change the skin of the slider. The 'noskin' skin is a border- and buttonless skin. Your custom skins will appear in the list when you create their folders as well.
skinsPath	'skins_folder_path'	'/layerslider/skins/'	You can change the default path of the skins folder. Note, that you must use the slash at the end of the path.
globalBGColor	'color_name'	'transparent'	Global background color of the slider. Slides with non-transparent background will cover this one. You can use all CSS methods such as HEX or RGB(A) values.
globalBGImage	'image_url' false	false	Global background image of the slider.
Navigation properties
navPrevNext	true false	true	Disabling this option will hide the Prev and Next buttons.
navStartStop	true false	true	Disabling this option will hide the Start and Stop buttons.
navButtons	true false	true	Disabling this option will hide slide navigation buttons or thumbnails.
hoverPrevNext	true false	true	Show the buttons only when someone moves the mouse cursor over the slider. This option depends on the previous setting.
hoverBottomNav	true false	false	Slide navigation buttons (including thumbnails) will be shown on mouse hover only.
keybNav	true false	true	You can navigate through slides with the left and right arrow keys.
touchNav	true false	true	Gesture-based navigation with swiping on touch-enabled devices.
showBarTimer	true false	false	Show the bar timer to indicate slideshow progression. (Not working under IE7 and 8.)
showCircleTimer	true false	true	Use circle timer to indicate slideshow progression.
thumbnailNavigation	'disabled' 'hover' 'always'	'hover'	Type of the thumbnail navigation. Note, that 'hover' setting needs navButtons property set to true!
tnContainerWidth	'percentage_value'	'60%'	The width of the thumbnail container according to the width of the slider.
tnWidth	<num>	100	The width of the thumbnails in pixels.
tnHeight	<num>	60	The height of the thumbnails in pixels.
tnActiveOpacity	0 - 100	35	Opacity in percents of thumbnail of the active slide.
tnInactiveOpacity	0 - 100	100	Opacity in percents of thumbnails of the inactive slides.
Video properties
autoPlayVideos	true false	true	Videos (and HTML5 audios) will be automatically started on the active slide.
autoPauseSlideshow	'auto' true false	'auto'	The slideshow can temporally paused while videos are plaing. You can choose to permanently stop the pause until manual restarting.
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:

					<script type="text/javascript">

						// Running the code when the document is ready
						$(document).ready(function(){

							// Calling LayerSlider on the target element
							$('#layerslider').layerSlider({
								responsive : false
							});
						});

					</script>

Fixed dimensions mode

Full-width mode

To create a full-width slider, please set the width of the slider to 100% and make sure that all the container elements of the slider have also 100% width. The normal responsive mode is not working here but there are two useful properties in full-width sliders:

					<script type="text/javascript">

						// Running the code when the document is ready
						$(document).ready(function(){

							// Calling LayerSlider on the target element
							$('#layerslider').layerSlider({
								responsiveUnder : 960,
								layersContainer : 960
							});
						});

					</script>

Full.width slider smart features

As mentioned in the previous entries, responsive mode needs an initial proportion to calculate new dimensions for scaling. A full-width slider will always be as wide as your browser window, so your slider initial size depends on the viewing environment, and the plugin cannot identify an exact proportion to work with. Another aspect is to control how scaling should work with large screens, you most likely want to enable it below a certain amount of size, and prevent any action above that. This is why we have a feature called responsiveUnder. It enables you to specify imaginary borders that is dynamically enable or disable responsive layout depending on the size of your browser window.

The layersContainer feature will create an inner area inside your sliders to have invisible borders you can position your content relative to. This area will be as wide as you specify in pixels, and will always be centered. While this feature can be used with any layout, it is made for full-width sliders. Using this feature will result a resized canvas in slider builder that has the new dimensions you have specified.

Full size (background mode)

To use the slider in full size mode you will need to add width: 100%; and height: 100; style settings to the slider element as well as you html and body elements and please make sure that the first element after the <body> should be the slider in your HTML markup.

					<html>
						<head>

							<style>

								body, html {
									width: 100%;
									height: 100%;
								}

							</style>

						</head>
						<body>
							<div id="layerslider" style="width: 100%; height: 100%;">

								<!-- slider data -->

							</div>


							<!-- other site data -->


						</body>
					</html>

Full size slider markup

Creating slides

You can create slides by adding a <div> element into the slider with the class of ls-slide as can be seen in the below example. The highlighted lines are indicating new additions to our previous examples.

					<div id="layerslider" style="width: 800px; height: 400px;">

						<!-- this is a slide -->
						<div class="ls-slide">
							<!-- slide contents goes here -->
						</div>
					</div>

Adding a slide

Naturally, you can add multiple slides in the same way.

					<div id="layerslider" style="width: 800px; height: 400px;">

						<!-- first slide -->
						<div class="ls-slide">
							<!-- slide contents goes here -->
						</div>

						<!-- second slide -->
						<div class="ls-slide">
							<!-- slide contents goes here -->
						</div>

						<!-- third slide -->
						<div class="ls-slide">
							<!-- slide contents goes here -->
						</div>
					</div>

Adding multiple slides

Configuring slides

You can configure slide-related settings by entering them in an attribute called data-ls on the slide element. This makes possible to change the timings, transition options and other common settings.

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

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

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

					<div id="layerslider" style="width: 800px; height: 400px;">

						<!-- This is a slide -->
						<div class="ls-slide">

							<!-- This is a slide thumbnail -->
							<img src="..." class="ls-tn" alt="Slide thumbnail">

						</div>
					</div>

Adding a slide thumbnail

The slider will use the slide background if you don't specify a thumbnail image.

Linking slides

You can link the entire surface of slides by adding an HTML <a> element as one of your layers in slides with the special class of ls-link. See the example below.

Please note, that the anchor element with the ls-link class must be the last layer of the actual slide so you should place it directly before the closing div tag of the slide.

					<!-- slide -->
					<div class="ls-slide">

						<!-- slide background -->
						<img src="..." class="ls-bg" alt="">

						<!-- This will link the whole slide to "example.com" -->
						<a href="http://example.com" class="ls-link"></a>
					</div>

Linking the whole slide

Deep linking slides

You can specify a slide name/alias, which can be used to start the slideshow with the corresponding slide referencing from the URL.

The following example will start the slider with the second slide if we are using the slide alias cakes in the URL example.com/page/#cakes.

					<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

3D slide transitions

ID	Transition name	ID	Transition name

Custom slide transitions

All the available preset transitions are stored in the layerslider.transitions.js file. You can modify this file to add your own transitions or change the default ones. It is storing a complex JSON object, thus modifying that file is not recommended for users without web development experience.

Please note, we have more than 200 slide transitions, which takes advantage of every capability of the plugin. You will most likely find a transition within the default ones that you are wanted to use custom transitions in the first place.

See the source

We are assuming your have programming experience since it is needed for making custom transitions, therefore we don't have any guides for this particular topic. See the source code of the layerslider.transitions.js file. It is pretty straightforward for people with web development experience, and we are using mostly the same properties that are available at many other places.

What is a layer?

Layers are the contents of slides. Unlike with conventional slider plugins, you can use multiple contents in a slide. These can be images, text, custom HTML, video and audio contents.

Adding a layer

You can add layers by appending standard HTML elements into slides with the ls-l class name. For image layers use the <img> element. For text/HTML layers use the appropriate element like <div>, <p>, <h1>, <h2>, <h3> etc. The highlighted lines are indicating new additions to our previous examples.

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

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

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

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

					<!-- 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:

					<!-- 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:

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

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

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

					//Initialize the slider as usual
					$('#slider').layerSlider({
						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 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

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

					for(key in data) {
						console.log(key + ' = ' + data[key]);
					}

Getting the slider data object

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.

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

From version 5 LayerSlider is using the powerful Greensock Animation Engine for transitons so we removed jquery transit and easing.js

					<!-- 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

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

				<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

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

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.


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

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

Changes in version 5.6.0

Fixed an issue with embedded YouTube videos
Fixed YouTube and Vimeo bullet thumbnails which have not been loaded properly

Changes in version 5.5.0

Significantly improved YouTube video playback behavior

Changes in version 5.4.0

Fixed some potential JS errors that could happen in some very rare cases
YouTube video thumbnails have not been loaded until the previous slide

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:

read this documentation carefully
and browsed the FAQ of the item.

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