<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>LayerSlider responsive demo slider</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="../documentation/assets/css/doc.css">
<link rel="stylesheet" href="../documentation/assets/css/font.css">
<link href="http://fonts.googleapis.com/css?family=Oswald:300,400,700" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,300,400italic,400,600italic,600,700italic,700,800italic,800" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700,300' rel='stylesheet' type='text/css'>
<!--[if lt IE 9]>
<script src="../documentation/assets/js/html5.js"></script>
<![endif]-->
<!-- 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>
<style>
/*
You can add your custom layer styles
in the style attribute of the layer,
to a style element or
to an external css file
*/
#layerslider * {
font-family: Lato, 'Open Sans', sans-serif;
}
.ls-container, .ls-slide, .ls-inner, .ls-lt-container, .ls-bg {
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
-moz-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
-ms-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
</style>
</head>
<body class="nobg">
<div id="slider-wrapper">
<div id="layerslider" style="width:1280px;height:720px;max-width: 1280px;">
<div class="ls-slide" data-ls="slidedelay:8000;transition2d:75,79;">
<img src="sliderimages/bg.jpg" class="ls-bg" alt="Slide background"/><img class="ls-l" style="top:0px;left:0px;white-space: nowrap;" data-ls="offsetxin:0;durationin:2000;easingin:linear;offsetxout:0;durationout:6000;showuntil:1;easingout:linear;" src="sliderimages/bg21.jpg" alt="">
<h1 class="ls-l" style="top:60px;left:800px;font-weight: 300;font-size:40px;color:#286e89;white-space: nowrap;" data-ls="offsetxin:50;durationin:3000;rotateyin:60;transformoriginin:right 50% 0;offsetxout:-50;durationout:3000;showuntil:400;rotateyout:-60;transformoriginout:left 50% 0;">KREATURA MEDIA</h1>
<h2 class="ls-l" style="top:100px;left:801px;font-weight: 500;font-size:30px;color:#fa6b4b;white-space: nowrap;" data-ls="offsetxin:-50;durationin:3000;delayin:500;rotateyin:-60;transformoriginin:left 50% 0;offsetxout:50;durationout:3000;showuntil:1;rotateyout:60;transformoriginout:right 50% 0;">presents</h2>
<img class="ls-l" style="top:450px;left:100px;white-space: nowrap;" data-ls="offsetxin:0;durationin:750;delayin:1000;rotateyin:90;transformoriginin:left 50% 0;offsetxout:0;durationout:750;rotateyout:90;transformoriginout:right -50% 0;" src="sliderimages/slide-d-5-5.png" alt=""><img class="ls-l" style="top:450px;left:250px;white-space: nowrap;" data-ls="offsetxin:0;durationin:750;delayin:1300;rotateyin:90;transformoriginin:left 50% 0;offsetxout:0;durationout:750;rotateyout:90;transformoriginout:left -50% 0;" src="sliderimages/slide-d-5-6.png" alt=""><img class="ls-l" style="top:300px;left:250px;white-space: nowrap;" data-ls="offsetxin:0;durationin:750;delayin:1600;rotatexin:90;transformoriginin:50% bottom 0;offsetxout:0;durationout:500;rotateyout:90;skewyout:1;transformoriginout:left 50% 0;" src="sliderimages/slide-d-5-4.png" alt=""><img class="ls-l" style="top:300px;left:100px;white-space: nowrap;" data-ls="offsetxin:0;durationin:750;delayin:1900;rotateyin:-90;transformoriginin:right 50% 0;offsetxout:0;durationout:750;rotateyout:90;transformoriginout:right 50% 0;" src="sliderimages/slide-d-5-3.png" alt=""><img class="ls-l" style="top:150px;left:100px;white-space: nowrap;" data-ls="offsetxin:0;durationin:750;delayin:2200;rotatexin:90;transformoriginin:50% bottom 0;offsetxout:0;durationout:750;rotateyout:90;transformoriginout:right 150% 0;" src="sliderimages/slide-d-5-1.png" alt=""><img class="ls-l" style="top:150px;left:250px;white-space: nowrap;" data-ls="offsetxin:0;durationin:750;delayin:2500;rotateyin:90;transformoriginin:left 50% 0;offsetxout:0;durationout:750;rotateyout:90;transformoriginout:left 150% 0;" src="sliderimages/slide-d-5-2.png" alt="">
<h1 class="ls-l" style="font-family: Oswald; top:65px;left:80px;font-weight: 500; text-align: center; opacity: .5;width:340px;font-size:60px;color:#a14730;border-radius:5px;white-space: nowrap;" data-ls="offsetxin:0;durationin:2500;delayin:3000;easingin:easeOutElastic;rotatexin:90;transformoriginin:50% bottom 0;offsetxout:0;rotateout:-90;transformoriginout:left bottom 0;">LAYERSLIDER</h1>
<p class="ls-l" style="top:150px;left:500px;font-weight: 300;height:40px;padding-right:10px;padding-left:10px;font-size:30px;line-height:37px;color:#ffffff;background:#fa6b4b;border-radius:4px;white-space: nowrap;" data-ls="durationin:1500;delayin:3300;rotatein:20;rotatexin:30;scalexin:1.5;scaleyin:1.5;transformoriginin:left 50% 0;durationout:750;rotateout:20;rotatexout:-30;scalexout:0;scaleyout:0;transformoriginout:left 50% 0;">
GREENSOCK ENGINE
</p>
<p class="ls-l" style="top:190px;left:500px;font-weight: 300;font-size:24px;color:#333;white-space: nowrap;" data-ls="offsetxin:0;durationin:1500;delayin:3700;rotateyin:90;skewxin:60;transformoriginin:25% 50% 0;offsetxout:100;durationout:750;skewxout:60;">
with the latest technologies
</p>
<p class="ls-l" style="top:250px;left:500px;font-weight: 300;height:40px;padding-right:10px;padding-left:10px;font-size:30px;line-height:37px;color:#ffffff;background:#fa6b4b;border-radius:4px;white-space: nowrap;" data-ls="durationin:1500;delayin:4000;rotatein:20;rotatexin:30;scalexin:1.5;scaleyin:1.5;transformoriginin:left 50% 0;durationout:750;rotateout:20;rotatexout:-30;scalexout:0;scaleyout:0;transformoriginout:left 50% 0;">
SMOOTH RENDERING
</p>
<p class="ls-l" style="top:290px;left:500px;font-weight: 300;font-size:24px;color:#333;white-space: nowrap;" data-ls="offsetxin:0;durationin:1500;delayin:4400;rotateyin:90;skewxin:60;transformoriginin:25% 50% 0;offsetxout:100;durationout:750;skewxout:60;">
with hardware-acceleration
</p>
<p class="ls-l" style="top:350px;left:500px;font-weight: 300;height:40px;padding-right:10px;padding-left:10px;font-size:30px;line-height:37px;color:#ffffff;background:#fa6b4b;border-radius:4px;white-space: nowrap;" data-ls="durationin:1500;delayin:4700;rotatein:20;rotatexin:30;scalexin:1.5;scaleyin:1.5;transformoriginin:left 50% 0;durationout:750;rotateout:20;rotatexout:-30;scalexout:0;scaleyout:0;transformoriginout:left 50% 0;">
NEW TRANSITIONS
</p>
<p class="ls-l" style="top:390px;left:499px;font-weight: 300;font-size:24px;color:#333;white-space: nowrap;" data-ls="offsetxin:0;durationin:1500;delayin:5100;rotateyin:90;skewxin:60;transformoriginin:25% 50% 0;offsetxout:100;durationout:750;skewxout:60;">
slide, fade, scale, skew and rotate layers even in 3D
</p>
<p class="ls-l" style="top:450px;left:500px;font-weight: 300;height:40px;padding-right:10px;padding-left:10px;font-size:30px;line-height:37px;color:#ffffff;background:#fa6b4b;border-radius:4px;white-space: nowrap;" data-ls="durationin:1500;delayin:5400;rotatein:20;rotatexin:30;scalexin:1.5;scaleyin:1.5;transformoriginin:left 50% 0;durationout:750;rotateout:20;rotatexout:-30;scalexout:0;scaleyout:0;transformoriginout:left 50% 0;">
CLEANER MARKUP
</p>
<p class="ls-l" style="top:490px;left:499px;font-weight: 300;font-size:24px;color:#333;white-space: nowrap;" data-ls="offsetxin:0;durationin:1500;delayin:5800;rotateyin:90;skewxin:60;transformoriginin:25% 50% 0;offsetxout:100;durationout:750;skewxout:60;">
working with the plugin is more easy
</p>
</div>
<div class="ls-slide" data-ls="slidedelay:9500;transition2d:5;timeshift:-3000;">
<img src="sliderimages/bg4.jpg" class="ls-bg" alt="Slide background"/>
<p class="ls-l" style="top:-17px;left:915px;opacity: .3; font-weight: 300;font-size:200px;color:#ffffff;white-space: nowrap;" data-ls="offsetxin:0;durationin:2000;delayin:1000;easingin:linear;scalexin:0;scaleyin:0;offsetxout:0;durationout:2000;showuntil:1;easingout:linear;scalexout:2;scaleyout:2;">
&
</p>
<h1 class="ls-l" style="top:60px;left:800px;font-weight: 300;font-size:40px;color:#ffffff;white-space: nowrap;" data-ls="offsetxin:50;durationin:3000;rotateyin:60;transformoriginin:right 50% 0;offsetxout:-50;durationout:3000;showuntil:400;rotateyout:-60;transformoriginout:left 50% 0;">RESPONSIVE</h1>
<h2 class="ls-l" style="top:100px;left:801px;font-weight: 500;font-size:30px;color:#286e89;white-space: nowrap;" data-ls="offsetxin:-50;durationin:3000;delayin:500;rotateyin:-60;transformoriginin:left 50% 0;offsetxout:50;durationout:3000;showuntil:1;rotateyout:60;transformoriginout:right 50% 0;">mobile ready</h2>
<h1 class="ls-l" style="top:497px;left:788px;font-weight: 300;height:40px;padding-right:10px;padding-left:10px;font-size:30px;line-height:37px;color:#ffffff;background:#29768f;border-radius:4px;white-space: nowrap;" data-ls="offsetxin:0;durationin:4000;delayin:2000;rotateyin:450;transformoriginin:right 50% 0;offsetxout:0;durationout:500;showuntil:1;easingout:easeInBack;rotateyout:-90;transformoriginout:right 50% 0;">VERSION</h1>
<h3 class="ls-l" style="top:220px;left:912px;font-weight: 300;font-size:400px;color:#ffffff;white-space: nowrap;" data-ls="offsetxin:0;durationin:4000;delayin:2000;rotateyin:450;transformoriginin:left 50% 0;offsetxout:0;durationout:500;showuntil:1;easingout:easeInBack;rotateyout:90;transformoriginout:left 50% 0;">5</h3>
<h1 class="ls-l" style="top:461px;left:767px;font-weight: 300; text-align: right;font-size:30px;color:#ffffff;white-space: nowrap;" data-ls="offsetxin:0;durationin:3500;delayin:6500;easingin:easeOutElastic;rotateyin:-90;transformoriginin:right 50% 0;offsetxout:0;durationout:500;rotateyout:-90;transformoriginout:right 50% 0;"><span style="color: #286e89;">WITH HUGE</span><br>
AND</h1>
<h3 class="ls-l" style="top:461px;left:943px;font-weight: 300;font-size:30px;color:#ffffff;white-space: nowrap;" data-ls="offsetxin:0;durationin:3500;delayin:6500;easingin:easeOutElastic;rotateyin:90;transformoriginin:left 50% 0;offsetxout:0;durationout:500;rotateyout:90;transformoriginout:left 50% 0;"><span style="color: #286e89;">PERFORMANCE</span><br>
FEATURE UPDATE</h3>
<img class="ls-l" style="top:180px;left:-82px;width:765px;white-space: nowrap;" data-ls="offsetxin:0;offsetyin:100;durationin:2000;delayin:1000;offsetxout:-100;offsetyout:50;durationout:2000;showuntil:2010;" src="sliderimages/slide-a-1.png" alt=""><img class="ls-l" style="top:495px;left:135px;white-space: nowrap;" data-ls="offsetxin:0;offsetyin:100;durationin:2000;delayin:1000;offsetxout:-100;offsetyout:50;durationout:2000;showuntil:2010;" src="sliderimages/slide-a-2.png" alt=""><img class="ls-l" style="top:275px;left:135px;white-space: nowrap;" data-ls="offsetxin:0;offsetyin:100;durationin:2000;delayin:1000;offsetxout:0;durationout:1500;showuntil:500;scalexout:1.2;scaleyout:1.2;" src="sliderimages/slide-a-3.png" alt=""><img class="ls-l" style="top:275px;left:135px;white-space: nowrap;" data-ls="offsetxin:0;durationin:1500;delayin:3500;scalexin:1.5;scaleyin:1.5;offsetxout:-100;offsetyout:50;durationout:2000;showuntil:1;" src="sliderimages/slide-a-4.png" alt=""><img class="ls-l" style="top:476px;left:436px;white-space: nowrap;" data-ls="offsetxin:0;durationin:1;delayin:3498;offsetxout:0;durationout:750;showuntil:1;easingout:easeOutSine;scalexout:10;scaleyout:10;" src="sliderimages/slide-a-6.png" alt=""><img class="ls-l" style="top:475px;left:383px;white-space: nowrap;" data-ls="offsetxin:0;offsetyin:bottom;delayin:2500;offsetxout:0;offsetyout:bottom;durationout:1000;showuntil:1;" src="sliderimages/slide-a-5.png" alt="">
<div class="ls-l" style="top:180px;left:610px;width:10px;height:400px;background:#29768f;border-radius:2px;white-space: nowrap;" data-ls="offsetxin:0;durationin:2000;delayin:6000;scaleyin:0;transformoriginin:50% bottom 0;offsetxout:0;durationout:500;scaleyout:0;transformoriginout:50% bottom 0;">
</div>
<div class="ls-l" style="top:530px;left:590px;opacity: .5;width:10px;height:50px;background:#ffffff;border-radius:2px;white-space: nowrap;" data-ls="offsetxin:0;durationin:2000;delayin:6000;scaleyin:0;transformoriginin:50% bottom 0;offsetxout:0;durationout:500;scaleyout:0;transformoriginout:50% bottom 0;">
</div>
<p class="ls-l" style="top:589px;left:533px;font-style: italic; text-align: center; font-weight: 500; opacity: .75;font-size:24px;line-height:25px;color:#ffffff;white-space: nowrap;" data-ls="offsetxin:0;delayin:6500;scalexin:2;scaleyin:2;offsetxout:0;durationout:500;scalexout:2;scaleyout:2;">
8x<br>
performance
</p>
<div class="ls-l" style="top:380px;left:410px;width:10px;height:200px;background:#29768f;border-radius:2px;white-space: nowrap;" data-ls="offsetxin:0;durationin:2000;delayin:6500;scaleyin:0;transformoriginin:50% bottom 0;offsetxout:0;durationout:500;scaleyout:0;transformoriginout:50% bottom 0;">
</div>
<div class="ls-l" style="top:530px;left:390px;opacity: .5;width:10px;height:50px;background:#ffffff;border-radius:2px;white-space: nowrap;" data-ls="offsetxin:0;durationin:2000;delayin:6500;scaleyin:0;transformoriginin:50% bottom 0;offsetxout:0;durationout:500;scaleyout:0;transformoriginout:50% bottom 0;">
</div>
<p class="ls-l" style="top:589px;left:349px;font-style: italic; text-align: center; font-weight: 500; opacity: .75;font-size:24px;line-height:25px;color:#ffffff;white-space: nowrap;" data-ls="offsetxin:0;delayin:7000;scalexin:2;scaleyin:2;offsetxout:0;durationout:500;scalexout:2;scaleyout:2;">
many new<br>
features
</p>
<img class="ls-l" style="top:520px;left:200px;opacity: .75;width:60px;white-space: nowrap;" data-ls="offsetxin:-50;delayin:6500;rotatein:90;scalexin:3;scaleyin:3;transformoriginin:25% 25% 0;offsetxout:-50;rotateout:90;scalexout:0.5;scaleyout:0.5;" src="sliderimages/feature-responsive.png" alt=""><img class="ls-l" style="top:450px;left:200px;opacity: .75;width:60px;white-space: nowrap;" data-ls="offsetxin:-50;delayin:6700;rotatein:90;scalexin:3;scaleyin:3;transformoriginin:25% 25% 0;offsetxout:-50;rotateout:90;scalexout:0.5;scaleyout:0.5;" src="sliderimages/feature-layers.png" alt=""><img class="ls-l" style="top:380px;left:200px;opacity: .75;width:60px;white-space: nowrap;" data-ls="offsetxin:-50;delayin:6900;rotatein:90;scalexin:3;scaleyin:3;transformoriginin:25% 25% 0;offsetxout:-50;rotateout:90;scalexout:0.5;scaleyout:0.5;" src="sliderimages/feature-mobile.png" alt=""><img class="ls-l" style="top:310px;left:200px;opacity: .75;width:60px;white-space: nowrap;" data-ls="offsetxin:-50;delayin:7100;rotatein:90;scalexin:3;scaleyin:3;transformoriginin:25% 25% 0;offsetxout:-50;rotateout:90;scalexout:0.5;scaleyout:0.5;" src="sliderimages/feature-options.png" alt=""><img class="ls-l" style="top:240px;left:200px;opacity: .75;width:60px;white-space: nowrap;" data-ls="offsetxin:-50;delayin:7300;rotatein:90;scalexin:3;scaleyin:3;transformoriginin:25% 25% 0;offsetxout:-50;rotateout:90;scalexout:0.5;scaleyout:0.5;" src="sliderimages/feature-performance.png" alt=""><img class="ls-l" style="top:170px;left:200px;opacity: .75;width:60px;white-space: nowrap;" data-ls="offsetxin:-50;delayin:7500;rotatein:90;scalexin:3;scaleyin:3;transformoriginin:25% 25% 0;offsetxout:-50;rotateout:90;scalexout:0.5;scaleyout:0.5;" src="sliderimages/feature-slideshow.png" alt=""><img class="ls-l" style="top:520px;left:130px;opacity: .75;width:60px;white-space: nowrap;" data-ls="offsetxin:-50;delayin:7000;rotatein:90;scalexin:3;scaleyin:3;transformoriginin:25% 25% 0;offsetxout:-50;rotateout:90;scalexout:0.5;scaleyout:0.5;" src="sliderimages/feature-youtube.png" alt=""><img class="ls-l" style="top:450px;left:130px;opacity: .75;width:60px;white-space: nowrap;" data-ls="offsetxin:-50;delayin:7200;rotatein:90;scalexin:3;scaleyin:3;transformoriginin:25% 25% 0;offsetxout:-50;rotateout:90;scalexout:0.5;scaleyout:0.5;" src="sliderimages/feature-vimeo.png" alt=""><img class="ls-l" style="top:380px;left:130px;opacity: .75;width:60px;white-space: nowrap;" data-ls="offsetxin:-50;delayin:7400;rotatein:90;scalexin:3;scaleyin:3;transformoriginin:25% 25% 0;offsetxout:-50;rotateout:90;scalexout:0.5;scaleyout:0.5;" src="sliderimages/feature-html5.png" alt=""><img class="ls-l" style="top:310px;left:130px;opacity: .75;width:60px;white-space: nowrap;" data-ls="offsetxin:-50;delayin:7600;rotatein:90;scalexin:3;scaleyin:3;transformoriginin:25% 25% 0;offsetxout:-50;rotateout:90;scalexout:0.5;scaleyout:0.5;" src="sliderimages/feature-ios.png" alt=""><img class="ls-l" style="top:240px;left:130px;opacity: .75;width:60px;white-space: nowrap;" data-ls="offsetxin:-50;delayin:7800;rotatein:90;scalexin:3;scaleyin:3;transformoriginin:25% 25% 0;offsetxout:-50;rotateout:90;scalexout:0.5;scaleyout:0.5;" src="sliderimages/feature-android.png" alt=""><img class="ls-l" style="top:170px;left:130px;opacity: .75;width:60px;white-space: nowrap;" data-ls="offsetxin:-50;delayin:8000;rotatein:90;scalexin:3;scaleyin:3;transformoriginin:25% 25% 0;offsetxout:-50;rotateout:90;scalexout:0.5;scaleyout:0.5;" src="sliderimages/feature-wordpress.png" alt="">
</div>
<div class="ls-slide" data-ls="slidedelay:8000;transition2d:4;">
<img src="sliderimages/slide-b-bg.jpg" class="ls-bg" alt="Slide background"/>
<p class="ls-l" style="top:44%;left:50%;font-weight: 300;font-size:30px;color:#ffffff;white-space: nowrap;" data-ls="offsetxin:50;durationin:750;easingin:easeOutBack;skewxin:-50;offsetxout:-50;durationout:600;showuntil:500;easingout:easeInBack;skewxout:50;">
introducing
</p>
<p class="ls-l" style="top:50%;left:50%;font-weight: 300;font-size:50px;color:#ffffff;white-space: nowrap;" data-ls="offsetxin:-100;durationin:750;delayin:250;easingin:easeOutBack;skewxin:-50;offsetxout:100;durationout:600;showuntil:500;easingout:easeInBack;skewxout:50;">
PARALLAX LAYERS
</p>
<img class="ls-l" style="top:30%;left:50%;width:120%;height:auto;white-space: nowrap;" data-ls="offsetxin:-100;durationin:2000;delayin:1500;offsetxout:-100;durationout:1000;parallaxlevel:-2;" src="sliderimages/slide-b-1.png" alt=""><img class="ls-l" style="top:353px;left:237px;white-space: nowrap;" data-ls="offsetxin:50;durationin:2000;delayin:1500;offsetxout:50;durationout:1000;parallaxlevel:1;" src="sliderimages/slide-b-2.png" alt=""><img class="ls-l" style="top:453px;left:483px;white-space: nowrap;" data-ls="offsetxin:100;durationin:2000;delayin:1500;offsetxout:100;durationout:1000;parallaxlevel:3;" src="sliderimages/slide-b-3.png" alt=""><img class="ls-l" style="top:456px;left:586px;white-space: nowrap;" data-ls="offsetxin:150;durationin:2000;delayin:1500;offsetxout:150;durationout:1000;parallaxlevel:5;" src="sliderimages/slide-b-4.png" alt=""><img class="ls-l" style="top:421px;left:659px;white-space: nowrap;" data-ls="offsetxin:200;durationin:2000;delayin:1500;offsetxout:200;durationout:1000;parallaxlevel:7;" src="sliderimages/slide-b-5.png" alt="">
<p class="ls-l" style="top:47%;left:690px;font-weight: 500;font-size:35px;color:#ffffff;white-space: nowrap;" data-ls="offsetxin:0;durationin:1500;delayin:1500;rotateyin:90;transformoriginin:left 50% 0;offsetxout:0;durationout:1500;showuntil:1000;rotateyout:-90;transformoriginout:left 50% 0;">
Move your mouse<br>
over this slide!
</p>
<img class="ls-l" style="top:45%;left:585px;white-space: nowrap;" data-ls="offsetxin:0;durationin:1500;delayin:1500;rotateyin:90;transformoriginin:right 50% 0;offsetxout:0;durationout:1500;showuntil:1000;rotateyout:-90;transformoriginout:right 50% 0;" src="sliderimages/mouse.png" alt="">
<p class="ls-l" style="top:560px;left:50px;font-weight: 300;height:40px;padding-right:10px;padding-left:10px;font-size:30px;line-height:37px;color:#849e00;background:#ffffff;border-radius:4px;white-space: nowrap;" data-ls="offsetxin:0;durationin:2000;delayin:3500;rotatein:-45;rotateyin:-1;scalexin:0.5;scaleyin:0.5;transformoriginin:left bottom 0;offsetxout:0;durationout:1000;rotateout:45;scalexout:2;scaleyout:2;transformoriginout:right bottom 0;">
FANCY PARALLAX EFFECT
</p>
<p class="ls-l" style="top:600px;left:50px;font-weight: 500;font-size:30px;color:#ffffff;white-space: nowrap;" data-ls="offsetxin:0;durationin:2000;delayin:3500;rotatein:-45;scalexin:2;scaleyin:2;transformoriginin:right top 0;offsetxout:0;durationout:1000;rotateout:45;scalexout:2;scaleyout:2;transformoriginout:left top 0;">
by mouse move
</p>
</div>
<div class="ls-slide" data-ls="slidedelay:5500;transition2d:11;">
<img src="sliderimages/bg51.jpg" class="ls-bg" alt="Slide background"/><img class="ls-l" style="top:0px;left:0px;white-space: nowrap;" data-ls="offsetxin:0;durationin:2000;scalexin:1.1;scaleyin:1.1;offsetxout:0;" src="sliderimages/bg31.jpg" alt="">
<p class="ls-l" style="top:50%;left:50%;font-weight: 300; background: white; background: rgba(255,255,255,.2);height:40px;padding-right:10px;padding-left:10px;font-size:30px;line-height:37px;color:#ffe9db;white-space: nowrap;" data-ls="offsetxin:0;rotatexin:-70;scalexin:3;scaleyin:3;offsetxout:0;durationout:1000;showuntil:500;rotatexout:70;scalexout:0.5;scaleyout:0.5;">
embedding videos?
</p>
<div class="ls-l" style="top:100px;left:50%;background: white; background: rgba(255,255,255,.2); box-shadow: 0px 5px 70px -20px black;width:660px;height:380px;white-space: nowrap;" data-ls="offsetxin:0;durationin:2000;delayin:1500;easingin:easeInOutExpo;rotatexin:20;scalexin:0.8;scaleyin:0.8;transformoriginin:50% 50% -150;offsetxout:0;durationout:1000;rotatexout:-20;scalexout:0.8;scaleyout:0.8;transformoriginout:50% 50% -150;">
</div>
<div class="ls-l" style="top:110px;left:50%;white-space: nowrap;" data-ls="offsetxin:0;durationin:2000;delayin:1500;easingin:easeInOutExpo;rotatexin:20;scalexin:0.8;scaleyin:0.8;transformoriginin:50% 50% -150;offsetxout:0;durationout:1000;rotatexout:-20;scalexout:0.8;scaleyout:0.8;transformoriginout:50% 50% -150;">
<iframe src="//player.vimeo.com/video/15069551?title=0&byline=0&portrait=0&color=f75402" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>
</iframe>
</div>
<img class="ls-l" style="top:80%;left:35%;white-space: nowrap;" data-ls="offsetxin:-100;delayin:2500;easingin:easeInOutCubic;rotatein:-180;offsetxout:300;durationout:1000;easingout:easeInOutCubic;rotateout:360;" src="sliderimages/youtube-color.png" alt=""><img class="ls-l" style="top:80%;left:50%;white-space: nowrap;" data-ls="offsetxin:-200;delayin:2550;easingin:easeInOutCubic;rotatein:-270;offsetxout:200;durationout:1000;easingout:easeInOutCubic;rotateout:270;" src="sliderimages/vimeo-color.png" alt=""><img class="ls-l" style="top:80%;left:65%;white-space: nowrap;" data-ls="offsetxin:-300;delayin:2600;easingin:easeInOutCubic;rotatein:-360;offsetxout:100;durationout:1000;easingout:easeInOutCubic;rotateout:180;" src="sliderimages/html5-color.png" alt="">
<p class="ls-l" style="top:630px;left:35%;opacity: .75;font-size:15px;color:#ffdcc7;white-space: nowrap;" data-ls="offsetxin:0;durationin:500;delayin:3300;easingin:easeOutBack;scalexin:0;scaleyin:0;offsetxout:0;durationout:500;scalexout:4;scaleyout:4;">
video
</p>
<p class="ls-l" style="top:630px;left:50%;opacity: .75;font-size:15px;color:#ffdcc7;white-space: nowrap;" data-ls="offsetxin:0;durationin:500;delayin:3350;easingin:easeOutBack;scalexin:0;scaleyin:0;offsetxout:0;durationout:500;scalexout:4;scaleyout:4;">
video
</p>
<p class="ls-l" style="top:630px;left:65%;opacity: .75;font-size:15px;color:#ffdcc7;white-space: nowrap;" data-ls="offsetxin:0;durationin:500;delayin:3400;easingin:easeOutBack;scalexin:0;scaleyin:0;offsetxout:0;durationout:500;scalexout:4;scaleyout:4;">
video + audio
</p>
<p class="ls-l" style="top:30px;left:30px;font-weight: 300; background: black; background: rgba(0,0,0,.2);height:40px;padding-right:10px;padding-left:10px;font-size:30px;line-height:37px;color:#ffe9db;white-space: nowrap;" data-ls="offsetxin:150;delayin:3000;skewxin:-60;offsetxout:-150;skewxout:60;">
RICH MEDIA SUPPORT
</p>
<p class="ls-l" style="top:30px;left:835px;font-weight: 300; background: black; background: rgba(0,0,0,.2);height:40px;padding-right:10px;padding-left:10px;font-size:30px;line-height:37px;color:#ffe9db;white-space: nowrap;" data-ls="offsetxin:-150;delayin:3000;skewxin:60;offsetxout:150;skewxout:-60;">
WITH OPTIONAL AUTOPLAY
</p>
</div>
<div class="ls-slide" data-ls="slidedelay:8000;transition2d:21,105;timeshift:-1000;">
<img src="sliderimages/bg6b.jpg" class="ls-bg" alt="Slide background"/><img class="ls-l" style="top:155px;left:50%;white-space: nowrap;" data-ls="offsetxin:0;durationin:1500;delayin:3000;easingin:linear;scalexin:0;scaleyin:0;offsetxout:0;durationout:1500;showuntil:1;easingout:linear;scalexout:2;scaleyout:2;" src="sliderimages/circle.png" alt=""><img class="ls-l" style="top:155px;left:50%;white-space: nowrap;" data-ls="offsetxin:0;durationin:1500;delayin:4000;easingin:linear;scalexin:0;scaleyin:0;offsetxout:0;durationout:1500;showuntil:1;easingout:linear;scalexout:2;scaleyout:2;" src="sliderimages/circle.png" alt="">
<p class="ls-l" style="top:334px;left:56px;font-weight: 300; opacity: .4;font-size:200px;color:#f06a52;white-space: nowrap;" data-ls="offsetxin:0;durationin:2500;delayin:1000;scalexin:0;scaleyin:0;offsetxout:0;scalexout:0;scaleyout:0;">
&
</p>
<p class="ls-l" style="top:420px;left:20px;font-weight: 300; background: white; background: rgba(255,255,255,.85);height:40px;padding-right:10px;padding-left:10px;font-size:30px;line-height:37px;color:#bd5949;white-space: nowrap;" data-ls="offsetxin:-50;durationin:2000;delayin:1000;offsetxout:-50;durationout:1000;">
ALL THESE FEATURES
</p>
<p class="ls-l" style="top:460px;left:173px;font-weight: 500;font-size:30px;color:#bd5949;white-space: nowrap;" data-ls="offsetxin:50;delayin:2000;skewxin:-60;offsetxout:-50;durationout:1000;skewxout:-60;">
much more!
</p>
<p class="ls-l" style="top:420px;left:1113px;font-weight: 500; text-align: right;font-size:30px;color:#bd5949;white-space: nowrap;" data-ls="offsetxin:0;delayin:2500;rotatein:90;transformoriginin:right bottom 0;offsetxout:0;durationout:1500;transformoriginout:right bottom 0;">
...to create
</p>
<p class="ls-l" style="top:460px;left:990px;font-weight: 300; text-align: right;width:260px;height:40px;padding-right:10px;font-size:30px;line-height:37px;color:#ffffff;background:#f06a52;white-space: nowrap;" data-ls="offsetxin:0;durationin:2500;delayin:3250;easingin:easeOutElastic;rotatexin:90;transformoriginin:50% top 0;offsetxout:0;durationout:1000;rotatexout:90;transformoriginout:50% bottom 0;">
THE BEST SLIDER
</p>
<p class="ls-l" style="top:505px;left:983px;font-family:'Indie Flower';font-size:30px;color:#d9482b;white-space: nowrap;" data-ls="offsetxin:-50;delayin:3500;skewxin:60;scalexin:1.5;offsetxout:-50;durationout:1000;skewxout:60;scalexout:1.5;">
with no compromises!
</p>
<img class="ls-l" style="top:180px;left:50%;white-space: nowrap;" data-ls="durationin:1500;scalexin:0.8;scaleyin:0.8;scalexout:0.8;scaleyout:0.8;" src="sliderimages/ls5box.png" alt="">
</div>
</div>
</div>
<div id="example-wrapper">
<div id="example">
<section>
<h4>LayerSlider responsive demo slider</h4>
<p>
<a href="../documentation/documentation.html#slider-examples">back to examples</a>
</p>
</section>
</div>
</div>
<!-- Initializing the slider -->
<script>
jQuery("#layerslider").layerSlider({
pauseOnHover: false,
autoPlayVideos: false,
skinsPath: '../layerslider/skins/'
});
</script>
</body>
</html>