You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
172 lines
4.6 KiB
172 lines
4.6 KiB
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>LayerSlider simple example</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;
|
|
font-weight: 300;
|
|
}
|
|
|
|
#layerslider h1 {
|
|
font-size: 30px;
|
|
color: #eee;
|
|
}
|
|
|
|
#layerslider h2 {
|
|
font-size: 40px;
|
|
color: #111;
|
|
}
|
|
|
|
</style>
|
|
|
|
</head>
|
|
<body class="nobg">
|
|
<div id="slider-wrapper">
|
|
|
|
<!-- LayerSlider start -->
|
|
|
|
<div id="layerslider" style="width: 1280px; height: 720px; max-width: 1280px;">
|
|
|
|
<!-- slide one start -->
|
|
|
|
<div class="ls-slide" data-ls="slidedelay: 7000; transition2d: 75,79;">
|
|
|
|
<!-- slide background image -->
|
|
|
|
<img src="sliderimages/jellyfish-blur.jpg" class="ls-bg" alt="Slide background"/>
|
|
|
|
<!-- layer one -->
|
|
|
|
<h1 class="ls-l" style="top: 100px; left: 100px;" data-ls="
|
|
offsetxin: 0;
|
|
offsetxout: 300;
|
|
offsetyin: top;
|
|
offsetyout: 300;
|
|
durationin: 2000;
|
|
durationout: 2000;
|
|
delayin: 2000;
|
|
rotateyin: 60;
|
|
">It's a clownfish!</h1>
|
|
|
|
<!-- layer two -->
|
|
|
|
<img class="ls-l" style="left: 30%; top: 50%;" src="sliderimages/clownfish.png" alt="Image layer" data-ls="
|
|
offsetxin: left;
|
|
offsetxout: right;
|
|
offsetyin: 150;
|
|
offsetyout: -250;
|
|
fadein: false;
|
|
fadeout: false;
|
|
easingin: easeoutquart;
|
|
easingout: easeinquart;
|
|
durationin: 2500;
|
|
durationout: 2500;
|
|
delayin: 500;
|
|
showuntil: 1;
|
|
">
|
|
|
|
</div>
|
|
|
|
<!-- slide one end -->
|
|
|
|
<!-- slide two start -->
|
|
|
|
<div class="ls-slide" data-ls="slidedelay: 5000; transition2d: 5; timeshift: -1000;">
|
|
|
|
<!-- slide background image -->
|
|
|
|
<img src="sliderimages/slide-b-bg.jpg" class="ls-bg" alt="Slide background"/>
|
|
|
|
<!-- layer one -->
|
|
|
|
<h2 class="ls-l" style="top: 600px; left: 50%;" data-ls="
|
|
offsetxin: -100;
|
|
offsetxout: 0;
|
|
offsetyin: 0;
|
|
offsetyout: bottom;
|
|
durationin: 2500;
|
|
delayin: 1000;
|
|
skewxin: 60;
|
|
">We like Tucans :)</h2>
|
|
|
|
<!-- layer two -->
|
|
|
|
<img class="ls-l" style="left: 650px; top: 70px;" src="sliderimages/tucan.png" alt="Image layer" data-ls="
|
|
offsetxin: right;
|
|
offsetxout: 0;
|
|
offsetyin: 200;
|
|
offsetyout: bottom;
|
|
rotatein: 50;
|
|
rotateout: -20;
|
|
fadein: false;
|
|
fadeout: false;
|
|
easingin: easeoutquart;
|
|
easingout: easeinquart;
|
|
durationin: 2500;
|
|
delayin: 500;
|
|
">
|
|
|
|
</div>
|
|
|
|
<!-- slide two end -->
|
|
|
|
</div>
|
|
|
|
<!-- LayerSlider end -->
|
|
|
|
</div>
|
|
|
|
<div id="example-wrapper">
|
|
<div id="example">
|
|
<section>
|
|
<h4>Simple example</h4>
|
|
<p>
|
|
This is a a really simple example slider that focuses on the main HTML markup for easier understanding.<br>
|
|
It containes only two slides and two layers in each slides.<br>Please open the <code>simplest-example.html</code> file in a text editor to see the commented HTML markup of the slider.
|
|
</p>
|
|
<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,
|
|
skinsPath: '../layerslider/skins/'
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|