forked from alvarotrigo/fullPage.js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathnavigationH.html
148 lines (125 loc) · 4.34 KB
/
navigationH.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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Vertical navigation dots - fullPage.js</title>
<meta name="author" content="Alvaro Trigo Lopez" />
<meta name="description" content="fullPage full-screen sliders navigation widh dots." />
<meta name="keywords" content="fullpage,jquery,demo,screen,fullscreen,sliders navigation, horizontal navigation,horizontal,navigation,dots" />
<meta name="Resource-type" content="Document" />
<link rel="stylesheet" type="text/css" href="../jquery.fullPage.css" />
<link rel="stylesheet" type="text/css" href="examples.css" />
<style>
/* Style for our header texts
* --------------------------------------- */
h1{
font-size: 5em;
font-family: arial,helvetica;
color: #fff;
margin:0;
}
.intro p{
color: #fff;
}
/* Centered texts in each section
* --------------------------------------- */
.section{
text-align:center;
}
/* Overwriting styles for the navigation dots (to place it where we want)
* --------------------------------------- */
.fp-slidesNav.bottom{
bottom: 25px;
}
/* Bottom menu
* --------------------------------------- */
#infoMenu li a {
color: #fff;
}
#section2 h1{
color: #333;
}
</style>
<!--[if IE]>
<script type="text/javascript">
var console = { log: function() {} };
</script>
<![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="../vendors/jquery.slimscroll.min.js"></script>
<script type="text/javascript" src="../jquery.fullPage.js"></script>
<script type="text/javascript" src="examples.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#fullpage').fullpage({
anchors: ['firstPage', 'secondPage', '3rdPage'],
sectionsColor: ['#8FB98B', '#DE564B', '#EAE1C0'],
slidesNavigation: true,
});
});
</script>
</head>
<body>
<select id="demosMenu">
<option selected>Choose Demo</option>
<option id="backgrounds">Background images</option>
<option id="backgroundVideo">Background video</option>
<option id="gradientBackgrounds">Gradient backgrounds</option>
<option id="backgroundsFixed">Fixed fullscreen backgrounds</option>
<option id="looping">Looping</option>
<option id="noAnchor">No anchor links</option>
<option id="scrollingSpeed">Scrolling speed</option>
<option id="easing">Easing</option>
<option id="callbacks">Callbacks</option>
<option id="css3">CSS3</option>
<option id="continuous">Continuous scrolling</option>
<option id="normalScroll">Normal scrolling</option>
<option id="scrollBar">Scroll bar enabled</option>
<option id="scrolling">Scroll inside sections and slides</option>
<option id="navigationV">Vertical navigation dots</option>
<option id="navigationH">Horizontal navigation dots</option>
<option id="fixedHeaders">Fixed headers</option>
<option id="apple">Apple iPhone demo (animations)</option>
<option id="oneSection">One single section</option>
<option id="responsiveHeight">Responsive Height</option>
<option id="responsiveWidth">Responsive Width</option>
<option id="methods">Methods</option>
</select>
<div id="fullpage">
<div class="section " id="section0">
<div class="intro">
<img src="imgs/1.png" alt="1"/>
<h1>Sliders navigation dots</h1>
<p>Create a navigation for your landscape sliders</p>
</div>
</div>
<div class="section" id="section1">
<div class="slide" id="slide1" data-anchor="slide1">
<div class="intro">
<h1>Clickable</h1>
<p>
You can even click on the navigation and jump directly to another section.
</p>
</div>
</div>
<div class="slide" id="slide2" data-anchor="slide2">
<h1>Slide 2</h1>
</div>
<div class="slide" id="slide3" data-anchor="slide3">
<h1>Slide 3</h1>
</div> <div class="slide" id="slide3" data-anchor="slide3">
<h1>Slide 4</h1>
</div>
<div class="slide" id="slide3" data-anchor="slide3">
<h1>Slide 5</h1>
</div>
</div>
<div class="section" id="section2">
<div class="intro">
<h1>Enjoy it</h1>
</div>
</div>
</div>
</body>
</html>