-
Notifications
You must be signed in to change notification settings - Fork 12
/
index.html
executable file
·225 lines (193 loc) · 10.6 KB
/
index.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
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PlusSlider</title>
<link rel="stylesheet" type="text/css" href="css/plusslider.css" />
<style>
/* Custom Slider Styling */
img { border: 0; display: block; margin: 0 auto; }
.slide1 { background: #171105 url(./images/image1.jpg) no-repeat center top; padding: 20px 40px; width: 550px; }
.slide1 > div { margin: 0 auto; width: 630px; }
.slide1 h2 { color: #fff; font-size: 20px; margin: 0 0 20px 0; text-align: left; }
.slide1 p { border-left: 3px solid #fff; color: #fff; padding: 0 0 0 10px; }
/* Page Styling */
.quote, .quote2, .quote3 { padding: 20px 0; width: 580px; font: 24px Georgia, serif; text-align: center; width: 100%; position: relative; }
.quote { background: #f1f1f1; color: #333; }
.quote2 { background: #333; color: #f1f1f1; }
.quote3 { background: #666; color: #f1f1f1; }
.quote:after, .quote2:after, .quote3:after { content: '100% width'; position: absolute; right: 0; top: 0; }
.plusslider.slider3, .plusslider.slider3 .plusslider-pagination-wrapper { border: none; border-radius: 0; }
body { background: #333; color: #fff; font: 14px Verdana, sans-serif; }
h1 { font: 52px/122px Arial, serif; text-align: center; }
#page-wrap { margin: 0 auto; max-width: 768px; }
#features h2 { margin: 20px 0 10px 0; font: 36px Georgia, serif; text-align: left; }
#features h3 { margin:20px 0 10px 0; font: bold 18px Verdana, sans-serif; }
#features p { padding: 3px 0; }
#features li { padding: 6px 0; }
#features li:before { content: "}"; margin-right: 5px; }
#features pre { background: #f1f1f1; color: #333; overflow: auto; padding: 16px 5px 5px; line-height: 22px; font-size: 14px; }
#features span.amp { font: 18px Georgia, serif; }
em { font-style: italic; }
strong { font-weight: bold; }
</style>
</head>
<body>
<div id="page-wrap">
<div id="content">
<h1>PlusSlider</h1>
<div id="slider">
<div data-title="PlusSlider" class="slide1">
<div>
<h2>PlusSlider</h2>
<p>
A content slider that simply works...<br />
The right way
</p>
</div>
</div>
<a data-title="Tree" href="#"><img src="images/tree.jpg" alt="" height="250" width="351" /></a>
<img data-title="Sunset" src="images/clouds.jpg" alt="" height="134" width="630" />
<img data-title="Stop Sign" src="images/image4.jpg" alt="" height="250" width="630" />
</div>
<br /><br />
<div id="slider2">
<a href="#"><img src="images/image2.jpg" alt="" height="250" width="630" /></a>
<img src="images/image3.jpg" alt="" height="250" width="630" />
<img src="images/image4.jpg" alt="" height="250" width="630" />
</div>
<br /><br />
<div id="slider3">
<div data-title="Quote" class="quote">
I do not fear death,<br />
in view of the fact that I had been dead<br />
for billions and billions of years<br />
before I was born, and had not suffered<br />
the slightest inconvenience from it.<br />
- Mark Twain
</div>
<div data-title="Quote2" class="quote2">
The difference between the right word<br />
and the almost right word is the difference<br />
between lightning and a lightning bug.<br />
- Mark Twain
</div>
<div data-title="Quote3" class="quote3">
Nature knows no indecencies;<br />
man invents them.<br />
- Mark Twain
</div>
</div>
<div class="content" id="features">
<h2>Features</h2>
<ul>
<li>Slides are <em>HTML</em> (<em>Can be images or text</em>)</li>
<li>Easily swap between <strong>fading</strong> <span class="amp">&</span> <strong>sliding</strong></li>
<li>Multiple PlusSliders per page</li>
<li>Very <em>simple</em> <span class="amp">&</span> <em>valid markup</em></li>
<li>Autoplay (<em>Optional</em>)</li>
<li><strong>Next/Previous</strong> Navigation (<em>Optional</em>)</li>
<li>Titled or numbered <strong>paginated</strong> navigation (<em>Optional</em>)</li>
<li>Callback available after each slide</li>
<li>Supports slides of various width and height</li>
<li>Tested on <strong><abbr title="Internet Explorer">IE</abbr>7+</strong> and <strong>modern browsers</strong></li>
</ul>
<h2>Default Options</h2>
<pre><code>$('#slider').plusSlider({
/* General */
sliderType: 'slider', // Choose whether the carousel is a 'slider' or a 'fader'
width: false, // Overide the default CSS width
height: false, // Overide the default CSS width
/* Display related */
defaultSlide: 0, // Sets the default starting slide - Number based on item index
displayTime: 4000, // The amount of time the slide waits before automatically moving on to the next one. This requires 'autoPlay: true'
sliderEasing: 'linear', // Anything other than 'linear' and 'swing' requires the easing plugin
speed: 500, // The amount of time it takes for a slide to fade into another slide
/* Functioanlity related */
autoPlay: true, // Creats a times, looped 'slide-show'
keyboardNavigation: true, // The keyboard's directional left and right arrows function as next and previous buttons
pauseOnHover: true, // AutoPlay does not continue ifsomeone hovers over Plus Slider.
/* Arrow related */
createArrows: true, // Creates forward and backward navigation
nextText: 'Next', // Adds text to the 'next' trigger
prevText: 'Previous', // Adds text to the 'prev' trigger
/* Pagination related */
createPagination: true, // Creates Numbered pagination
paginationPosition: 'prepend', // Place the pagination above the slider within the HTML
paginationWidth: false, // Automatically gives the pagination a dynamic width
paginationTitle: false, // Checks for attribute 'data-title' on each slide and names the pagination accordingly
/* Callbacks */
onSlide: null // Callback function
});</code></pre>
<h2>Changelog</h2>
<h3>Version 1.4</h3>
<ul>
<li>Added slider support for dynamic <code>width</code> and <code>height</code></li>
<li>Streamlined the script</li>
<li>Removed the <code>paginationThumbnails</code> option</li>
<li>Set the <code>paginationWidth</code> to default to false</li>
<li>Changed the title of the option <code>autoPlay</code> to <code>autoPlay</code></li>
<li>Added <code>defaultSlide</code> option</li>
<li>Added comments throughout the jquery.plusslider.js file as well as made it more human-readable</li>
<li>Changed a couple of element types and class names</li>
<li>Added <code>.plusslide-container</code> class to the <code>.child</code> parent</li>
</ul>
<h3>Version 1.3</h3>
<ul>
<li>Added nextText and prevText options</li>
<li>Added the paginationThumbnails option</li>
<li>Added the nextSlide() functionality to toSlide()</li>
<li>Removed the nextSlide() function - Redundant</li>
</ul>
<h3>Version 1.2.6</h3>
<ul>
<li>Added a paginationTitle</li>
<li>Plugin optimization</li>
<li>Added a minimal style option for easier CSS customization - jordanlev</li>
<li>Added callback function - jordanlev</li>
<li>Added toSlide() function - jordanlev</li>
</ul>
<h3>Version 1.2</h3>
<ul>
<li>Added option to place pagination before the slides</li>
<li>Fixed a bug where PlusSlider wouldn't fade when display was set to none</li>
<li>Removed version number from all file names</li>
</ul>
<h3>Version 1.1</h3>
<ul>
<li>Added support for multiple sliders per page</li>
<li>Added a <code>width</code> & <code>height</code> option</li>
</ul>
<h3>Version 1</h3>
<ul>
<li>First official version</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src='js/jquery.easing.1.3.js'></script>
<script type="text/javascript" src='js/jquery.plusslider.js'></script>
<script type="text/javascript">
var slider;
$(document).ready(function(){
slider = new $.plusSlider($('#slider'), {
autoPlay: false,
sliderEasing: 'easeInOutExpo', // Anything other than 'linear' and 'swing' requires the easing plugin
paginationPosition: 'append',
sliderType: 'slider' // Choose whether the carousel is a 'slider' or a 'fader'
});
$('#slider2').plusSlider({
autoPlay: false,
displayTime: 2000, // The amount of time the slide waits before automatically moving on to the next one. This requires 'autoPlay: true'
sliderType: 'fader' // Choose whether the carousel is a 'slider' or a 'fader'
});
$('#slider3').plusSlider({
sliderEasing: 'easeInOutExpo', // Anything other than 'linear' and 'swing' requires the easing plugin
autoPlay: false,
sliderType: 'slider' // Choose whether the carousel is a 'slider' or a 'fader'
});
});
</script>
</body>
</html>