|
3 | 3 | <head> |
4 | 4 | <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" /> |
5 | 5 | <meta http-equiv="content-type" content="text/html;charset=utf-8"> |
6 | | - |
7 | 6 | <meta name="keywords" content="JavaScript,carousel,mobile,touch,slide"> |
8 | | - |
9 | 7 | <meta name="description" content="JavaScript touch carousel with zero dependencies"> |
10 | | - |
11 | 8 | <title>ItemSlide.js - JavaScript touch carousel</title> |
12 | | - |
13 | 9 | <style> |
14 | 10 | body { |
15 | 11 | font-family: calibri, sans-serif; |
16 | 12 | text-align: center; |
17 | 13 | margin: 0; |
| 14 | + height: 98vh; |
18 | 15 | background-color: #8601AF; |
19 | 16 | } |
20 | 17 |
|
21 | | - header { |
22 | | - width: 100vw; |
23 | | - height: 15vh; |
| 18 | + #header { |
| 19 | + width: 100%; |
| 20 | + padding-top: 5px; |
| 21 | + padding-bottom: 5px; |
24 | 22 | background-color: #FEFE33; |
25 | 23 | text-align: center; |
26 | 24 | } |
27 | 25 |
|
28 | 26 | #headertext { |
29 | 27 | text-decoration: none; |
30 | 28 | color: #8601AF; |
31 | | - |
32 | 29 | font-size: 6.5vh; |
33 | 30 | font-weight: 400; |
34 | 31 | } |
35 | 32 |
|
36 | 33 | #about { |
37 | | - height: 48.5vh; |
38 | | - width: 90vw; |
39 | | - |
| 34 | + width: 90%; |
40 | 35 | margin-left: auto; |
41 | 36 | margin-right: auto; |
42 | | - |
43 | 37 | font-size: 5vh; |
44 | | - color: #FFF; |
| 38 | + color: white; |
45 | 39 | } |
46 | 40 |
|
47 | 41 | #about a { |
48 | 42 | font-size: 3.5vh; |
49 | 43 | color: white; |
50 | 44 | } |
51 | 45 |
|
52 | | - footer { |
| 46 | + #footer { |
53 | 47 | position: fixed; |
54 | 48 | font-size: 2.5vh; |
55 | 49 | bottom: 0%; |
56 | | - padding: 0.5vh; |
| 50 | + padding: 0.5%; |
57 | 51 | background-color: #8601AF; |
58 | 52 | font-weight: 200; |
59 | | - color: #FFF; |
| 53 | + color: white; |
60 | 54 | right: 0; |
61 | 55 | left: 0; |
62 | 56 | } |
63 | 57 |
|
64 | | - footer .hrefs { |
| 58 | + #footer .hrefs { |
65 | 59 | color: #FFF; |
66 | 60 | font-weight: 400; |
67 | 61 | text-decoration: none; |
68 | 62 | } |
69 | 63 |
|
70 | | - </style> |
71 | | - |
72 | | - <style> |
73 | 64 | #scrolling { |
74 | | - position:fixed; |
75 | | - top:42%; |
76 | | - |
77 | 65 | background: #8601AF; |
78 | 66 | height: 58%; |
79 | 67 | width: 100%; |
80 | | - |
81 | 68 | overflow: hidden; |
82 | 69 | } |
83 | 70 |
|
84 | | - ul { |
| 71 | + #scrolling ul { |
85 | 72 | user-select: none; |
86 | | - |
87 | 73 | margin: 0; |
88 | 74 | padding: 0; |
89 | | - position: absolute; |
90 | | - margin-top:4vh; |
91 | | - height:80%; |
92 | | - |
| 75 | + margin-top: 3%; |
| 76 | + height: 80%; |
93 | 77 | list-style-type: none; |
94 | | - |
95 | 78 | transform-style: preserve-3d; |
96 | 79 | } |
97 | 80 |
|
98 | | - li { |
99 | | - font-size: 8vmin; |
| 81 | + #scrolling ul li { |
| 82 | + font-size: 30vh; |
100 | 83 | float: left; |
101 | 84 | width: 55vw; |
102 | 85 | max-width: 750px; |
|
106 | 89 | text-align: center; |
107 | 90 | border-radius: 30px; |
108 | 91 | cursor: pointer; |
109 | | - background: #FFF; |
| 92 | + background: white; |
110 | 93 | transform: scale(0.95); |
111 | 94 | } |
112 | 95 |
|
113 | | - .itemslide-active { |
| 96 | + #scrolling ul .itemslide-active { |
114 | 97 | transform: scale(1); |
115 | 98 | } |
116 | 99 | </style> |
117 | | - |
118 | 100 | <script src="itemslide.js"></script> |
119 | | - |
120 | 101 | <script> |
121 | 102 | var itemslide; |
122 | | - |
123 | | - window.addEventListener("load", () => { |
124 | | - |
| 103 | + window.addEventListener("load", function () { |
125 | 104 | var element = document.querySelector("#scrolling ul"); |
126 | | - |
127 | 105 | itemslide = new Itemslide(element, { |
128 | 106 | swipeOut: true |
129 | 107 | }); |
130 | 108 | }); |
131 | 109 |
|
132 | | - window.addEventListener("resize", () => { |
| 110 | + window.addEventListener("resize", function () { |
133 | 111 | itemslide.reload(); |
134 | 112 | }); |
135 | 113 | </script> |
136 | 114 | </head> |
137 | 115 | <body> |
138 | | - <header> |
139 | | - <br> |
| 116 | + <div id="header"> |
140 | 117 | <a id="headertext" href="index.html"> |
141 | 118 | ItemSlide.js |
142 | 119 | </a> |
143 | | - </header> |
144 | | - |
145 | | - <section id="about"> |
| 120 | + </div> |
| 121 | + <div id="about"> |
| 122 | + <br> |
| 123 | + JavaScript Carousel Library |
| 124 | + <br> |
146 | 125 | <br> |
147 | | - JavaScript Carousel Library<br><br> |
148 | 126 | <a id="github" href="https://github.com/nir9/itemslide"> |
149 | 127 | Source on Github |
150 | 128 | </a> |
151 | | - </section> |
152 | | - |
153 | | - <section id="scrolling"> |
| 129 | + </div> |
| 130 | + <div id="scrolling"> |
154 | 131 | <ul> |
155 | 132 | <li> |
156 | 133 | 1 |
|
165 | 142 | 4 |
166 | 143 | </li> |
167 | 144 | </ul> |
168 | | - </section> |
169 | | - |
170 | | - <footer> |
| 145 | + </div> |
| 146 | + <div id="footer"> |
171 | 147 | Created by <a class="hrefs" href="https://github.com/nir9">Nir Lichtman</a> |
172 | | - </footer> |
| 148 | + </div> |
173 | 149 | </body> |
174 | 150 | </html> |
0 commit comments