-
Notifications
You must be signed in to change notification settings - Fork 6
/
Copy pathes5.html
66 lines (59 loc) · 2.42 KB
/
es5.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Basic Usage - macro-carousel demo</title>
<link rel="stylesheet" href="css/third-party/prism.css">
<link rel="stylesheet" href="css/demo.css">
</head>
<body>
<h1 id="title">Basic usage</h1>
<p>In order to make this demo work with older browsers, this demo is slightly different from the rest of the demos: (have a look at this page's source code)</p>
<ul>
<li>the transpiled version of <code><macro-carousel></code> is used instead (see demo.js)</li>
<li>the set of <code>babel-polyfills</code> is added before importing anything else</li>
<li>the <code>custom-elements-es5-adapter</code> is added to the page before running any Web Components related code</li>
</ul>
<a id="backToIndex" href="index.html">See all demos</a>
<template id="demoTemplate">
<style>
macro-carousel {
height: 300px;
padding: 0 60px;
}
.slide {
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(to bottom right, #f0f0f0, #c0c0c0);
box-shadow: inset 0px 0px 20px 0px rgba(0, 0, 0, .05);
color: white;
font-size: 5em;
font-family: sans-serif;
}
</style>
<!--
The basic version of macro-carousel doesn't show any UI that allows the
user to navigate through its slides. The slides can still be dragged,
or also navigated by programmatically calling next(), previous(), or
by setting the `selected` property.
-->
<macro-carousel slides-per-view="2" navigation>
<article class="slide">Slide 1</article>
<article class="slide">Slide 2</article>
<article class="slide">Slide 3</article>
<article class="slide">Slide 4</article>
</macro-carousel>
</template>
<!-- ES5 babel-polyfill -->
<script defer src="js/third-party/polyfill.min.js"></script>
<script defer src="js/third-party/inert.min.js"></script>
<script defer src="js/third-party/focus-visible.js"></script>
<script defer src="js/third-party/prism.js" data-manual></script>
<script defer src="js/third-party/custom-elements-es5-adapter.js"></script>
<script defer src="js/third-party/webcomponents-bundle.js"></script>
<script defer src="js/demo.js"></script>
</body>
</html>