Skip to content

Commit a46f5a8

Browse files
pscnunespscnunes
committed
Added Hexagon sample
1 parent 6754115 commit a46f5a8

File tree

8 files changed

+973
-0
lines changed

8 files changed

+973
-0
lines changed

‎samples/hexagon/css/font-awesome.min.css‎

Lines changed: 403 additions & 0 deletions
Large diffs are not rendered by default.

‎samples/hexagon/css/impulseslider.css‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
2+
3+
@font-face {
4+
font-family: 'fontawesome';
5+
src: url('../font/fontawesome.eot');
6+
src: url('../font/fontawesome.eot?#iefix') format('embedded-opentype'), url('../font/fontawesome.svg#fontawesome') format('svg'), url('../font/fontawesome.woff') format('woff'), url('../font/fontawesome.ttf') format('truetype');
7+
font-weight: normal;
8+
font-style: normal;
9+
}
10+
11+
body {
12+
font-family: 'Lato', Calibri, Arial, sans-serif;
13+
14+
}
15+
16+
.nav {
17+
z-index: 9999;
18+
19+
}
20+
21+
.arrow {
22+
width: 30px;
23+
height: 30px;
24+
background: #fff;
25+
color: #000;
26+
font-size: 15px;
27+
text-align: center;
28+
line-height: 10px;
29+
cursor: pointer;
30+
font-weight: normal;
31+
padding: 2px;
32+
top: 200px;
33+
position: relative;
34+
-moz-opacity: 0.70;
35+
-khtml-opacity: 0.70;
36+
opacity: 0.70;
37+
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha"(Opacity = 70 );
38+
filter: progid:DXImageTransform.Microsoft.Alpha(opacity = 70);
39+
filter: alpha(opacity = 70);
40+
}
41+
42+
.arrow:hover {
43+
background: #0066cc;
44+
}
45+
46+
#slider-container {
47+
margin-left:auto;
48+
margin-right:auto;
49+
margin-top: 100px;
50+
}
51+
52+
#slider-container #slider {
53+
-webkit-transform-style: preserve-3d;
54+
-moz-transform-style: preserve-3d;
55+
-o-transform-style: preserve-3d;
56+
transform-style: preserve-3d;
57+
58+
}
59+
60+
#slider-container .face {
61+
position: absolute;
62+
padding: 0px;
63+
}
64+
65+
.face {
66+
height: 150px;
67+
width: 200px;
68+
text-align: center;
69+
padding: 25px;
70+
opacity: 0.5;
71+
}
72+
73+
.one {
74+
background-color: #cccccc;
75+
}
76+
77+
.two {
78+
background-color: #999999;
79+
}
80+
81+
.three{
82+
background-color: #666666;
83+
}
84+
85+
.four {
86+
background-color: #333333;
87+
}
88+
89+
.five {
90+
background-color: #666666;
91+
}
92+
93+
.six {
94+
background-color: #aaaaaa;
95+
}
96+
97+
98+
99+

‎samples/hexagon/font/FontAwesome.otf‎

60.4 KB
Binary file not shown.

‎samples/hexagon/font/fontawesome-webfont.eot‎

36.5 KB
Binary file not shown.

‎samples/hexagon/font/fontawesome-webfont.svg‎

Lines changed: 399 additions & 0 deletions
Loading

‎samples/hexagon/font/fontawesome-webfont.ttf‎

77.2 KB
Binary file not shown.

‎samples/hexagon/font/fontawesome-webfont.woff‎

42.6 KB
Binary file not shown.

‎samples/hexagon/index.html‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<!DOCTYPE html>
2+
<html class="no-js" lang="en">
3+
<head>
4+
<meta content="charset=utf-8">
5+
<title>ImpulseSlider Demo</title>
6+
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
7+
<link rel="stylesheet" href="css/impulseslider.css" type="text/css" media="screen"/>
8+
<link rel="stylesheet" href="css/font-awesome.min.css" type="text/css" media="screen"/>
9+
</head>
10+
<body>
11+
<div class="container">
12+
13+
<div id="slider-container">
14+
<div id="slider">
15+
<div class="face one">
16+
17+
</div>
18+
<div class="face two">
19+
20+
</div>
21+
<div class="face three">
22+
23+
</div>
24+
<div class="face four">
25+
26+
</div>
27+
28+
<div class="face five">
29+
30+
</div>
31+
32+
<div class="face six">
33+
34+
</div>
35+
</div>
36+
<div class="nav">
37+
<i class="left arrow icon-arrow-left icon-4x"></i>
38+
<i class="pause arrow icon-pause icon-4x"></i>
39+
<i class="right arrow icon-arrow-right icon-4x"></i>
40+
</div>
41+
42+
</div>
43+
44+
45+
</div>
46+
47+
48+
<script src="../jquery-1.8.2.min.js"></script>
49+
<script src="../jquery.impulse.slider-0.3.js"></script>
50+
<script type="text/javascript">
51+
$(window).load(function() {
52+
$('#slider').impulseslider({
53+
height: 150,
54+
width: 200,
55+
depth: 170,
56+
perspective: 500,
57+
pauseTime: 1500,
58+
transitionDuration: 1000,
59+
transitionEffect: "ease-in-out",
60+
autostart: true,
61+
rightSelector: ".right",
62+
leftSelector: ".left",
63+
pauseSelector: ".pause",
64+
directionRight: true,
65+
containerSelector: "#slider-container",
66+
spinnerSelector: "#slider"
67+
});
68+
});
69+
</script>
70+
71+
</body>
72+
</html>

0 commit comments

Comments
 (0)