-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
273 lines (261 loc) · 9.4 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
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="title" content="Scrub Slider" />
<meta
name="description"
content="Scrub Slider - A lightweight javascript library that lets you 'scrub' transition between two images with style. Open-source front-end slider."
/>
<meta name="author" content="[email protected]" />
<title>Scrub Slider</title>
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link href="dist/scrub.css" rel="stylesheet" />
<link href="example/css/example.css" rel="stylesheet" />
<link
href="https://fonts.googleapis.com/css?family=Montserrat"
rel="stylesheet"
/>
<script>
(function (i, s, o, g, r, a, m) {
i["GoogleAnalyticsObject"] = r;
(i[r] =
i[r] ||
function () {
(i[r].q = i[r].q || []).push(arguments);
}),
(i[r].l = 1 * new Date());
(a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]);
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m);
})(
window,
document,
"script",
"https://www.google-analytics.com/analytics.js",
"ga"
);
ga("create", "UA-79424773-3", "auto");
ga("send", "pageview");
</script>
</head>
<body>
<main class="container-fluid">
<header class="row heading">
<div class="col-xs-12">
<h1 class="text-center">Scrub Slider</h1>
<h3 class="text-center">
A lightweight javascript library that lets you 'scrub' transition
between two images with style.
</h3>
</div>
</header>
<section class="row hero-slider">
<div class="col-xs-12 example-slider-hero" id="slider1">
<div></div>
<div></div>
</div>
</section>
<section class="row why-scrub">
<div class="col-xs-12 text-center">
<h2>Why Scrub?</h2>
<p>- Vanilla JS with no dependencies -</p>
<p>- Only around 10kb for both JS and CSS -</p>
<p>- Support for using multiple sliders on a page -</p>
<p>
- Simple configuration options and multiple implementation methods -
</p>
<p>- IE9+ supported -</p>
<p>- Available on NPM and Yarn -</p>
</div>
</section>
<section class="row more-examples">
<div class="col-xs-12">
<div class="example-slider-50" id="slider2">
<img
src="https://raw.github.com/Recidvst/recidvst-images/master/fierce-red-eye-owl-min.jpg"
alt="Red eyed owl image"
title="Red eyed owl image"
/>
<img
src="https://raw.github.com/Recidvst/recidvst-images/master/fierce-red-eye-owl-inverted-min.jpg"
alt="Red eyed owl image inverted"
title="Red eyed owl image inverted"
/>
</div>
</div>
</section>
<section class="row how-to">
<div class="col-xs-12 get-started">
<h2>Getting Started</h2>
<h3>Download</h3>
<ul>
<li>
Install the package (or download the dist files manually) from
<a
href="https://github.com/Recidvst/scrub-slider"
title="Scrub Slider Github pages"
>Github</a
>
or from
<a
href="https://www.npmjs.com/package/scrub-slider"
title="Scrub Slider NPM page"
>NPM</a
>
or
<a
href="https://yarnpkg.com/en/package/scrub-slider"
title="Scrub Slider Yarn page"
>Yarn</a
>
</li>
<br />
<li>
Include the js and css in your application by either importing the
module or using the UMD/IIFE output via a script tag.
</li>
</ul>
<h3>Initiate</h3>
<ul>
<li>
Scrub needs to be passed a containing element plus two images to
work.
</li>
<br />
<li>
Initiate a Scrub instance by calling
<strong class="violet">Scrub()</strong> with a valid selector (of
the parent element). This is best as an ID but a unique class is
fine too.
</li>
<br />
<li>
If you wish to configure your slider, pass
<strong class="violet">Scrub()</strong> an object with config
options (see below).
</li>
<br />
<li>
You have a choice for how you want to pass the two images:
<br />
<br />
- `img` with src properties
<br />
- `div` with background-image set on the tag
<br />
- use a different tag and pass the src via config
</li>
<br />
<li>
Edit the css provided to add your own styling e.g. to Zzthe handle
</li>
<br />
<li>The container should have a width.</li>
</ul>
</div>
<div class="col-xs-12 options">
<h2>Settings</h2>
<h3>Configure</h3>
<p>
You can configure your Scrub instance by passing your selector and
some config parameters as an object. The available options are as
follows: <br />
</p>
<ul>
<li>
<h4>Target</h4>
<strong> Purpose: </strong> This is the item which you wish to
become a Scrub slider! Pass the id or unique class of a container
element. <br />
<strong> Type: </strong> string <br />
<strong> Default: </strong> null <br />
<strong> Required: </strong> Yes.
</li>
<li>
<h4>Height</h4>
<strong> Purpose: </strong> This is the height of your Scrub
instance. Defaults to 500px. Specify height in pixels. <br />
<strong> Type: </strong> string <br />
<strong> Default: </strong> 500px <br />
<strong> Required: </strong> No. But recommended.
</li>
<li>
<h4>Handle</h4>
<strong> Purpose: </strong> This is the switch for the circular
handle control on the slider's dividing line. Set to false to
hide. If you want to style this differently, add your own css on
'.sliding'. <br />
<strong> Type: </strong> bool <br />
<strong> Default: </strong> true <br />
<strong> Required: </strong> No.
</li>
<li>
<h4>Src</h4>
<strong> Purpose: </strong> Alternate method of specifying slider
images. Pass an array of two strings containing an img src. Left
then right.<br />
<strong> Type: </strong> array <br />
<strong> Default: </strong> null <br />
<strong> Required: </strong> No. As long as the element you want
to instantiate as a Scrub slider is an image with valid src
property or a div with a valid background-image property.
</li>
<li>
<h4>Alt</h4>
<strong> Purpose: </strong> Add an alt tag to the slider. Pass an
array of two strings describing each image. Left then right.
<br />
<strong> Type: </strong> array <br />
<strong> Default: </strong> null <br />
<strong> Required: </strong> No.
</li>
</ul>
<br />
<p><strong>For example:</strong></p>
<pre>
Scrub({
<span>target:</span> '#slider1',
<span>height:</span> '500',
<span>handle:</span> true,
<span>src:</span> ['https://raw.github.com/Recidvst/recidvst-images/master/mustang-old-min.jpg','https://raw.github.com/Recidvst/recidvst-images/master/mustang-old-inverted-min.jpg'],
<span>alt:</span> ['Image number 1 alt','Image number 2 alt']
});</pre
>
</div>
</section>
<footer class="row text-center">
<div class="col-xs-12">
<a
class="btn"
href="https://github.com/Recidvst/scrub-slider/archive/master.zip"
title="Download Scrub Slider now."
>Download Now</a
>
<a
class="btn"
href="https://github.com/Recidvst/scrub-slider"
title="Get Scrub Slider via Github"
>See on Github</a
>
</div>
<div class="col-xs-12">
<p>
Made by Chris Snowden | Under MIT license |
<a
href="https://github.com/Recidvst/scrub-slider"
title="Scrub Slider on Github"
>See on Github</a
>
</p>
</div>
</footer>
</main>
<script src="dist/scrub.umd.js"></script>
<script src="example/example.js"></script>
<!-- <script type="module" src="example/example.js"></script>-->
</body>
</html>