<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>LayerSlider full width 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;
}
</style>
</head>
<body class="nobg">
<div id="full-slider-wrapper">
<div id="layerslider" style="width:100%;height:500px;">
<div class="ls-slide" data-ls="transition2d:1;timeshift:-1000;">
<img src="sliderimages/fw-1.jpg" class="ls-bg" alt="Slide background"/><img class="ls-l" style="top:280px;left:50%;white-space: nowrap;" data-ls="offsetxin:0;offsetyin:300;delayin:500;offsetxout:0;offsetyout:-50;durationout:1000;showuntil:220;easingout:easeInOutQuart;scalexout:1.2;scaleyout:1.2;transformoriginout:50% top 0;" src="sliderimages/s1.png" alt=""><img class="ls-l" style="top:230px;left:50%;white-space: nowrap;" data-ls="offsetxin:0;offsetyin:30;delayin:1720;scalexin:0.9;scaleyin:0.9;offsetxout:0;offsetyout:300;durationout:1000;scalexout:0.5;scaleyout:0.5;transformoriginout:50% bottom 0;" src="sliderimages/s2.png" alt=""><img class="ls-l" style="top:65%;left:50%;white-space: nowrap;" data-ls="offsetxin:0;offsetyin:250;durationin:950;delayin:500;offsetxout:0;offsetyout:-8;durationout:1000;showuntil:270;easingout:easeInOutQuart;scalexout:1.2;scaleyout:1.2;" src="sliderimages/s2.jpg" alt=""><img class="ls-l" style="top:195px;left:50%;white-space: nowrap;" data-ls="offsetxin:0;delayin:1720;easingin:easeInOutQuart;scalexin:0.7;scaleyin:0.7;offsetxout:-800;durationout:1000;" src="sliderimages/s1.jpg" alt="">
<p class="ls-l" style="top:150px;left:116px;font-weight: 300;height:40px;padding-right:10px;padding-left:10px;font-size:30px;line-height:37px;color:#ffffff;background:#82d10c;border-radius:3px;white-space: nowrap;" data-ls="offsetxin:0;durationin:2000;delayin:1500;easingin:easeOutElastic;rotatexin:-90;transformoriginin:50% top 0;offsetxout:-200;durationout:1000;">
FRESH FEATURES
</p>
<p class="ls-l" style="top:190px;left:125px;font-family:'Indie Flower';font-size:31px;color:#6db509;white-space: nowrap;" data-ls="offsetxin:0;durationin:2000;delayin:2000;easingin:easeOutElastic;rotatexin:90;transformoriginin:50% top 0;offsetxout:-400;">
for starter
</p>
<img class="ls-l ls-linkto-3" style="top:460px;left:610px;white-space: nowrap;" data-ls="offsetxin:-50;delayin:1000;rotatein:-40;offsetxout:-50;rotateout:-40;" src="sliderimages/left.png" alt=""><img class="ls-l ls-linkto-2" style="top:460px;left:650px;white-space: nowrap;" data-ls="offsetxin:50;delayin:1000;offsetxout:50;" src="sliderimages/right.png" alt="">
</div>
<div class="ls-slide" data-ls="transition2d:1;timeshift:-1000;">
<img src="sliderimages/fw-1.jpg" class="ls-bg" alt="Slide background"/><img class="ls-l" style="top:157px;left:284px;white-space: nowrap;" data-ls="offsetxin:300;durationin:2000;offsetxout:-300;parallaxlevel:-1;" src="sliderimages/l1.png" alt=""><img class="ls-l" style="top:20px;left:50%;white-space: nowrap;" data-ls="offsetxin:600;durationin:2000;offsetxout:-600;parallaxlevel:1;" src="sliderimages/l2.png" alt=""><img class="ls-l" style="top:37px;left:564px;white-space: nowrap;" data-ls="offsetxin:900;durationin:2000;offsetxout:-900;parallaxlevel:4;" src="sliderimages/l3.png" alt="">
<p class="ls-l" style="top:170px;left:174px;font-weight: 300;height:40px;padding-right:10px;padding-left:10px;font-size:30px;line-height:37px;color:#ffffff;background:#f04705;border-radius:3px;white-space: nowrap;" data-ls="offsetxin:0;durationin:2000;delayin:1500;easingin:easeOutElastic;rotatexin:-90;transformoriginin:50% top 0;offsetxout:-200;durationout:1000;parallaxlevel:10;">
SPICY PARALLAX EFFECT
</p>
<p class="ls-l" style="top:210px;left:183px;font-family:'Indie Flower';font-size:31px;color:#f04705;white-space: nowrap;" data-ls="offsetxin:0;durationin:2000;delayin:2000;easingin:easeOutElastic;rotatexin:90;transformoriginin:50% top 0;offsetxout:-400;parallaxlevel:8;">
for main course
</p>
<img class="ls-l ls-linkto-1" style="top:430px;left:210px;white-space: nowrap;" data-ls="offsetxin:-50;delayin:1000;offsetxout:-50;parallaxlevel:3;" src="sliderimages/left.png" alt=""><img class="ls-l ls-linkto-3" style="top:430px;left:250px;white-space: nowrap;" data-ls="offsetxin:50;delayin:1000;offsetxout:50;parallaxlevel:3;" src="sliderimages/right.png" alt="">
</div>
<div class="ls-slide" data-ls="transition2d:1;timeshift:-1000;">
<img src="sliderimages/fw-1.jpg" class="ls-bg" alt="Slide background"/><img class="ls-l" style="top:129px;left:487px;white-space: nowrap;" data-ls="offsetxin:400;durationin:2000;offsetxout:400;" src="sliderimages/d1.png" alt=""><img class="ls-l" style="top:104px;left:70px;white-space: nowrap;" data-ls="offsetxin:-200;durationin:2000;offsetxout:-200;" src="sliderimages/d2.png" alt="">
<p class="ls-l" style="top:320px;left:830px;font-weight: 300;height:40px;padding-right:10px;padding-left:10px;font-size:30px;line-height:37px;color:#ffffff;background:#544f8c;border-radius:3px;white-space: nowrap;" data-ls="offsetxin:0;durationin:2000;delayin:1500;easingin:easeOutElastic;rotatexin:-90;transformoriginin:50% top 0;offsetxout:-400;durationout:1000;">
SWEET TRANSITIONS
</p>
<p class="ls-l" style="top:360px;left:836px;font-family:'Indie Flower';font-size:31px;color:#544f8c;white-space: nowrap;" data-ls="offsetxin:0;durationin:2000;delayin:2000;easingin:easeOutElastic;rotatexin:90;transformoriginin:50% top 0;offsetxout:-600;">
for dessert
</p>
<img class="ls-l ls-linkto-2" style="top:430px;left:960px;white-space: nowrap;" data-ls="offsetxin:-50;delayin:1000;offsetxout:-50;" src="sliderimages/left.png" alt=""><img class="ls-l ls-linkto-1" style="top:430px;left:1000px;white-space: nowrap;" data-ls="offsetxin:50;delayin:1000;offsetxout:50;" src="sliderimages/right.png" alt="">
</div>
</div>
</div>
<div id="example-wrapper">
<div id="example">
<section>
<h4>Full width demo slider</h4>
<p>
A full width slider with three smart features:
</p>
<p>
<strong>Layers container:</strong> the pixel-positioned layers are always inside a centered (invisible) container element<br>
<strong>Responsive under:</strong> the slider will switch into responsive mode when the browser gets resized under a given value<br>
<strong>Parallax layers:</strong> Move your mouse over the second slide and and you will see a fancy real-time parallax effect!
</p>
<p>
<a href="../documentation/documentation.html#slider-examples">back to examples</a>
</p>
</section>
</div>
</div>
<!-- Initializing the slider -->
<script>
jQuery("#layerslider").layerSlider({
responsive: false,
responsiveUnder: 1280,
layersContainer: 1280,
skin: 'noskin',
hoverPrevNext: false,
skinsPath: '../layerslider/skins/'
});
</script>
</body>
</html>