index.html 17.9 KB
Newer Older
Michael Iseard's avatar
Michael Iseard committed
1
<!doctype html>
Michael Iseard's avatar
Michael Iseard committed
2
<html lang="en">
Michael Iseard's avatar
Michael Iseard committed
3

Michael Iseard's avatar
Michael Iseard committed
4
<head>
Michael Iseard's avatar
Michael Iseard committed
5
6
7
8
9
10
11
12
13
14
15
16
17
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-92977303-2"></script>
    <script>
        window.dataLayer = window.dataLayer || [];

        function gtag() {
            dataLayer.push(arguments);
        }
        gtag('js', new Date());

        gtag('config', 'UA-92977303-2');
    </script>

Michael Iseard's avatar
Michael Iseard committed
18
19
20
21
22
23
24
25
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
        crossorigin="anonymous">

Michael Iseard's avatar
Michael Iseard committed
26
    <!-- Citrus-Slider CSS -->
Michael Iseard's avatar
Michael Iseard committed
27
    <link rel="stylesheet" type="text/css" href="css/citrus-slider.min.css?v=1.0.41">
Michael Iseard's avatar
Michael Iseard committed
28
29

    <!-- highlightjs -->
30
    <link rel="stylesheet" href="css/highlightjs.css">
Michael Iseard's avatar
Michael Iseard committed
31

32
    <!-- favicon -->
33
    <link rel="icon" type="image/png" sizes="32x32" href="favicon.ico?v1.1">
Michael Iseard's avatar
tidy up    
Michael Iseard committed
34
35
36

    <!-- OpenSans font -->
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
37
38
39


    <title>Citrus Slider - A modern JavaScript carousel.</title>
Michael Iseard's avatar
Michael Iseard committed
40
41

    <style>
42
        body {
Michael Iseard's avatar
tidy up    
Michael Iseard committed
43
            font-family: 'Open Sans', sans-serif;
44
45
        }

Michael Iseard's avatar
Michael Iseard committed
46
47
48
49
50
51
52
53
54
        .slide::before {
            content: '';
            background: #000;
            position: absolute;
            width: 100%;
            height: 100%;
            opacity: 0.2;
        }

Michael Iseard's avatar
Michael Iseard committed
55
56
57
58
59
        .btn-primary,
        .btn-primary:hover,
        .btn-primary:active,
        .btn-primary:visited,
        .btn-primary:focus {
60
61
            background-color: transparent;
            border-color: #fff;
Michael Iseard's avatar
Michael Iseard committed
62
63
        }

64
65
        .btn-primary:not(:disabled):not(.disabled).active,
        .btn-primary:not(:disabled):not(.disabled):active,
Michael Iseard's avatar
tidy up    
Michael Iseard committed
66
        .show>.btn-primary.dropdown-toggle {
67
68
            background-color: transparent;
            border-color: #fff;
69
70
        }

Michael Iseard's avatar
Michael Iseard committed
71
        #intro {
Michael Iseard's avatar
Michael Iseard committed
72
            background-color: #59acff;
Michael Iseard's avatar
Michael Iseard committed
73
74
75
76
77
78
79
            color: #fff;
        }

        #intro hr {
            border-top: 1px solid rgba(255, 255, 255, 0.53);
        }

80
81
82
83
84
        #site-footer {
            background-color: #59acff;
            color: #fff;
            text-align: center;
            padding: 2em;
Michael Iseard's avatar
Michael Iseard committed
85
        }
Michael Iseard's avatar
Michael Iseard committed
86
    </style>
Michael Iseard's avatar
Michael Iseard committed
87
</head>
Michael Iseard's avatar
Michael Iseard committed
88

Michael Iseard's avatar
Michael Iseard committed
89
<body>
Michael Iseard's avatar
Michael Iseard committed
90

Michael Iseard's avatar
Michael Iseard committed
91
    <nav id="main-nav" class="navbar navbar-expand-lg navbar-light rounded">
Michael Iseard's avatar
Michael Iseard committed
92
        <div class="container">
Michael Iseard's avatar
Michael Iseard committed
93
            <img src="img/logo.svg?v1.1" width="30" height="30" class="d-inline-block align-top" alt="">
Michael Iseard's avatar
Michael Iseard committed
94
95
            <ul class="navbar-nav mr-auto">
                <li class="nav-item">
96
                    <a class="nav-item nav-link" href="#installation">Installation</a>
Michael Iseard's avatar
Michael Iseard committed
97
                </li>
98
99
100
                <li class="nav-item">
                    <a class="nav-item nav-link" href="#settings">Settings</a>
                </li>
Michael Iseard's avatar
Michael Iseard committed
101
102
103
104
105
106
107
108
109
            </ul>
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-item nav-link" href="https://www.iseardmedia.com">Iseard Media</a>
                </li>
                <li class="nav-item">
                    <a class="nav-item nav-link" href="https://gitea.iseardmedia.com/michael">Gitea</a>
                </li>
            </ul>
Michael Iseard's avatar
Michael Iseard committed
110
        </div>
Michael Iseard's avatar
Michael Iseard committed
111
    </nav>
Michael Iseard's avatar
Michael Iseard committed
112
    <div id="intro" class="jumbotron jumbotron-fluid">
Michael Iseard's avatar
Michael Iseard committed
113
        <div class="container">
Michael Iseard's avatar
Michael Iseard committed
114
115
116
117
118
119
120
            <div class="row align-items-center justify-content-center">
                <div class="col-8">
                    <h1 class="display-3">
                        Citrus Slider</h1>
                    <p class="lead">A modern JavaScript carousel with no third party requirements.</p>
                    <hr class="my-4">
                    <p class="lead">
Michael Iseard's avatar
Michael Iseard committed
121
                        <a class="btn btn-primary btn-lg" href="https://gitea.iseardmedia.com/michael/citrus-Slider/archive/1.0.4.zip" role="button">Download</a>
Michael Iseard's avatar
Michael Iseard committed
122
123
                        <a class="btn btn-primary btn-lg" href="https://gitea.iseardmedia.com/michael/citrus-Slider" role="button">Source</a>
                    </p>
Michael Iseard's avatar
Michael Iseard committed
124
                    <p>v1.0.4</p>
Michael Iseard's avatar
Michael Iseard committed
125
126
                </div>
                <div class="col d-none d-lg-block">
127
                    <img src="img/logo.svg?v1.1" width="300px" height="300px" class="d-inline-block align-top" alt="">
Michael Iseard's avatar
Michael Iseard committed
128
129
                </div>
            </div>
Michael Iseard's avatar
Michael Iseard committed
130
131
        </div>
    </div>
132
133
    <div class="container">
        <section>
134
            <div id="slider-demo-1" class="citrus-slider" data-citrus='{"slideTransition" : "zoom-fade"}' style="height: 400px;">
Michael Iseard's avatar
Michael Iseard committed
135
                <div>
Michael Iseard's avatar
Michael Iseard committed
136
                    <img src="img/1.png?v=1.0.0">
Michael Iseard's avatar
Michael Iseard committed
137
                    <h2>Light, fast and free</h2>
Michael Iseard's avatar
Michael Iseard committed
138
139
                </div>
                <div>
Michael Iseard's avatar
Michael Iseard committed
140
141
                    <img src="img/2.png?v=1.0.0">
                    <h2>Highly configurable</h2>
Michael Iseard's avatar
Michael Iseard committed
142
143
144
145
                    <br>
                    <div style="text-align: center;">
                        <a class="btn btn-primary" href="#settings">Settings</a>
                    </div>
Michael Iseard's avatar
Michael Iseard committed
146
147
148
149
                </div>
                <div>
                    <img src="img/3.png?v=1.0.0">
                    <h2>Put any text here you want</h2>
Michael Iseard's avatar
Michael Iseard committed
150
151
                </div>
                <div>
Michael Iseard's avatar
Michael Iseard committed
152
153
                    <img src="img/4.png?v=1.0.0">
                    <h2>Find out more below</h2>
Michael Iseard's avatar
Michael Iseard committed
154
155
156
157
                    <br>
                    <div style="text-align: center;">
                        <a class="btn btn-primary" href="#installation">Installation</a>
                    </div>
Michael Iseard's avatar
Michael Iseard committed
158
159
                </div>
            </div>
Michael Iseard's avatar
Michael Iseard committed
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
            <p class="small text-right">Images courtesy of
                <a target="_blank" href="https://www.junkanoomedia.com">Junkanoo Media</a>
            </p>
            <div id="demo-settings" class="row justify-content-center d-none d-lg-flex">
                <div class="btn-group col-md-auto">
                    <button class="btn btn-outline-dark dropdown-toggle" type="button" id="transitionButton" data-toggle="dropdown" aria-haspopup="true"
                        aria-expanded="false">
                        Transition
                    </button>
                    <div class="dropdown-menu" aria-labelledby="transitionButton">
                        <a class="dropdown-item" data-settings='{"slideTransition": "pan"}' href="#">Pan</a>
                        <a class="dropdown-item" data-settings='{"slideTransition": "zoom-fade"}' href="#">Zoom-fade</a>
                        <a class="dropdown-item" data-settings='{"slideTransition": "fallaway"}' href="#">Fallaway</a>
                        <a class="dropdown-item" data-settings='{"slideTransition": "scope"}' href="#">Scope</a>
                        <a class="dropdown-item" data-settings='{"slideTransition": "downandout"}' href="#">Downandout</a>
175
                    </div>
Michael Iseard's avatar
Michael Iseard committed
176
177
178
179
180
181
182
183
184
                </div>
                <div class="btn-group col-md-auto">
                    <button class="btn btn-outline-dark dropdown-toggle" type="button" id="effectButton" data-toggle="dropdown" aria-haspopup="true"
                        aria-expanded="false">
                        Effect Type
                    </button>
                    <div class="dropdown-menu" aria-labelledby="effectButton">
                        <a class="dropdown-item" data-settings='{"effectType": "pan"}' href="#">Pan</a>
                        <a class="dropdown-item" data-settings='{"effectType": "zoom"}' href="#">Zoom</a>
185
                    </div>
Michael Iseard's avatar
Michael Iseard committed
186
187
188
189
190
191
192
193
194
                </div>
                <div class="btn-group col-md-auto">
                    <button class="btn btn-outline-dark dropdown-toggle" type="button" id="animTextButton" data-toggle="dropdown" aria-haspopup="true"
                        aria-expanded="false">
                        Animate Text
                    </button>
                    <div class="dropdown-menu" aria-labelledby="animTextButton">
                        <a class="dropdown-item" data-settings='{"animateText": true}' href="#">True</a>
                        <a class="dropdown-item" data-settings='{"animateText": false}' href="#">False</a>
195
                    </div>
Michael Iseard's avatar
Michael Iseard committed
196
197
198
199
200
201
202
203
204
                </div>
                <div class="btn-group col-md-auto">
                    <button class="btn btn-outline-dark dropdown-toggle" type="button" id="indicatorsButton" data-toggle="dropdown" aria-haspopup="true"
                        aria-expanded="false">
                        Indicators
                    </button>
                    <div class="dropdown-menu" aria-labelledby="indicatorsButton">
                        <a class="dropdown-item" data-settings='{"showIndicators": true}' href="#">True</a>
                        <a class="dropdown-item" data-settings='{"showIndicators": false}' href="#">False</a>
205
                    </div>
Michael Iseard's avatar
Michael Iseard committed
206
207
208
209
210
211
212
213
214
                </div>
                <div class="btn-group col-md-auto">
                    <button class="btn btn-outline-dark dropdown-toggle" type="button" id="arrowsButton" data-toggle="dropdown" aria-haspopup="true"
                        aria-expanded="false">
                        Arrows
                    </button>
                    <div class="dropdown-menu" aria-labelledby="arrowsButton">
                        <a class="dropdown-item" data-settings='{"showArrows": true}' href="#">True</a>
                        <a class="dropdown-item" data-settings='{"showArrows": false}' href="#">False</a>
215
                    </div>
Michael Iseard's avatar
Michael Iseard committed
216
217
218
219
220
221
222
223
224
                </div>
                <div class="btn-group col-md-auto">
                    <button class="btn btn-outline-dark dropdown-toggle" type="button" id="autoPauseButton" data-toggle="dropdown" aria-haspopup="true"
                        aria-expanded="false">
                        Auto Pause
                    </button>
                    <div class="dropdown-menu" aria-labelledby="autoPauseButton">
                        <a class="dropdown-item" data-settings='{"autoPause": true, "paused" : false}' href="#">True</a>
                        <a class="dropdown-item" data-settings='{"autoPause": false, "paused" : false}' href="#">False</a>
225
                    </div>
Michael Iseard's avatar
Michael Iseard committed
226
227
228
229
230
231
232
233
234
                </div>
                <div class="btn-group col-md-auto">
                    <button class="btn btn-outline-dark dropdown-toggle" type="button" id="durationButton" data-toggle="dropdown" aria-haspopup="true"
                        aria-expanded="false">
                        Slide Duration
                    </button>
                    <div class="dropdown-menu" aria-labelledby="durationButton">
                        <a class="dropdown-item" data-settings='{"slideDuration": 5000, "paused" : false}' href="#">5s</a>
                        <a class="dropdown-item" data-settings='{"slideDuration": 2000, "paused" : false}' href="#">2s</a>
235
236
                    </div>
                </div>
Michael Iseard's avatar
Michael Iseard committed
237
            </div>
238
239
240
241
        </section>
        <hr class="my-4">
        <br/>
        <section>
242
            <h2 id="installation" class="display-4">Installation</h2>
Michael Iseard's avatar
Michael Iseard committed
243
            <br/>
244
            <h3>Include required files</h3>
Michael Iseard's avatar
tidy up    
Michael Iseard committed
245
246
            <p>Include citrus-slider in your project by adding these two lines before the end of the
                <code>head</code> tag.</p>
247
248
            <pre>
                <code class="html">
249
&lt;link rel="stylesheet" href="css/citrus-slider.min.css"&gt;
250
&lt;script src="js/citrus-slider.min.js"&gt;&lt;/script&gt;
251
252
253
                </code>
            </pre>
            <h3>Add markup</h3>
254
255
256
257
            <p>A simple container
                <code>&lt;div&gt;</code>, with each child
                <code>&lt;div&gt;</code> as a separate slide. The first
                <code>&lt;img&gt;</code> tag will be used as the slide background image.</p>
Michael Iseard's avatar
Michael Iseard committed
258
259
            <pre>
                <code class="html">
260
261
262
263
264
&lt;div class="citrus-slider"&gt;
    &lt;div&gt;&lt;img src="img/slide-1.jpg"&gt;&lt;/div&gt;
    &lt;div&gt;&lt;img src="img/slide-2.jpg"&gt;&lt;/div&gt;
    &lt;div&gt;&lt;img src="img/slide-3.jpg"&gt;&lt;/div&gt;
&lt;/div&gt;
Michael Iseard's avatar
Michael Iseard committed
265
266
                </code>
            </pre>
267
268
            <h3>Add desired content</h3>
            <p>This can include even include other images. Remember that the first image will be used as the slide background.</p>
Michael Iseard's avatar
Michael Iseard committed
269
270
            <pre>
                <code class="html">
271
272
273
274
275
&lt;div class="citrus-slider"&gt;
    &lt;div&gt;&lt;img src="img/slide-1.jpg"&gt;&lt;h2&gt;Slide 1&lt;/h2&gt;&lt;/div&gt;
    &lt;div&gt;&lt;img src="img/slide-2.jpg"&gt;&lt;h2&gt;Slide 2&lt;/h2&gt;&lt;/div&gt;
    &lt;div&gt;&lt;img src="img/slide-3.jpg"&gt;&lt;h2&gt;Slide 3&lt;/h2&gt;&lt;/div&gt;
&lt;/div&gt;
Michael Iseard's avatar
Michael Iseard committed
276
277
278
                </code>
            </pre>
            <h3>Customize settings</h3>
279
280
281
            <p>Add
                <code>data-citrus</code> followed by a JSON string of the
                <a href="#settings">settings</a> you would like to change.</p>
Michael Iseard's avatar
Michael Iseard committed
282
283
            <pre>
                <code class="html">
284
285
286
287
288
&lt;div class="citrus-slider" data-citrus='{"duration" : 4000, "transition" : "pan"}'&gt;
    &lt;div&gt;&lt;img src="img/slide-1.jpg"&gt;&lt;/div&gt;
    &lt;div&gt;&lt;img src="img/slide-2.jpg"&gt;&lt;/div&gt;
    &lt;div&gt;&lt;img src="img/slide-3.jpg"&gt;&lt;/div&gt;
&lt;/div&gt;
Michael Iseard's avatar
Michael Iseard committed
289
290
                </code>
            </pre>
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
        </section>
        <hr class="my-4">
        <br/>
        <section>
            <h2 id="settings" class="display-4">Settings</h2>
            <br>
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th scope="col">Key</th>
                        <th scope="col">Value</th>
                        <th scope="col">Default</th>
                        <th scope="col">Description</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>slideTransition</td>
                        <td>'pan', 'zoom-fade', 'scope', 'fallaway', 'downandout'</td>
                        <td>'pan'</td>
                        <td>Slide transition animation</td>
                    </tr>
                    <tr>
                        <td>slideIndex</td>
                        <td>1,2,3 etc.</td>
                        <td>1</td>
                        <td>Indicate which slide the slider should start on</td>
                    </tr>
                    <tr>
                        <td>slideDuration</td>
                        <td>number in ms (e.g 5000)</td>
                        <td>5000</td>
                        <td>Delay between slide transitions</td>
                    </tr>
                    <tr>
                        <td>effect</td>
                        <td>true, false</td>
                        <td>true</td>
                        <td>Enable or disable slide resting animation</td>
                    </tr>
                    <tr>
                        <td>effectType</td>
                        <td>'zoom', 'pan'</td>
                        <td>'zoom'</td>
                        <td>Slide resting animation type</td>
                    </tr>
                    <tr>
                        <td>animateText</td>
                        <td>true, false</td>
                        <td>true</td>
                        <td>Enable or disable slide content animating in after slide transition</td>
                    </tr>
                    <tr>
                        <td>showIndicators</td>
                        <td>true, false</td>
                        <td>true</td>
                        <td>Enable or disable slide indicators</td>
                    </tr>
                    <tr>
                        <td>showArrows</td>
                        <td>true, false</td>
                        <td>true</td>
                        <td>Enable or disable slide arrows</td>
                    </tr>
                    <tr>
                        <td>paused</td>
                        <td>true, false</td>
                        <td>false</td>
                        <td>Enable or disable automatic, timed slide transition</td>
                    </tr>
                    <tr>
                        <td>autoPause</td>
                        <td>true, false</td>
                        <td>true</td>
                        <td>Enable or disable automatic pausing (e.g. when user interacts with slider)</td>
                    </tr>
                </tbody>
            </table>
        </section>
    </div>
Michael Iseard's avatar
Michael Iseard committed
371

372
    <footer id="site-footer" class="footer">
Michael Iseard's avatar
Michael Iseard committed
373
        <div class="container">
374
            <span>&copy; Copyright 2018 Iseard Media - All rights reserved</span>
Michael Iseard's avatar
Michael Iseard committed
375
376
377
378
379
380
381
382
383
384
385
        </div>
    </footer>

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>

Michael Iseard's avatar
Michael Iseard committed
386
    <!-- citrus-Slider JS -->
Michael Iseard's avatar
Michael Iseard committed
387
    <script src="js/citrus-slider.min.js?v=1.0.42"></script>
Michael Iseard's avatar
Michael Iseard committed
388

389
    <script>
Michael Iseard's avatar
Michael Iseard committed
390
391
392
393
394
395
396
397
398
399
400
401
402
        var settings = document.getElementById("demo-settings").querySelectorAll(".dropdown-item")
        var slider = sliderObjects[0].settings
        for (let i = 0; i < settings.length; i++) {
            settings[i].addEventListener('click', function (e) {
                e.preventDefault()
                var update = JSON.parse(e.target.dataset.settings)
                for (const key of Object.keys(update)) {
                    slider[key] = update[key]
                }
                sliderObjects[0].reset()
            })
        }
    </script>
403

Michael Iseard's avatar
Michael Iseard committed
404
405
406
407
408
    <!-- highlight.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
    <script>
        hljs.initHighlightingOnLoad();
    </script>
Michael Iseard's avatar
Michael Iseard committed
409
</body>
Michael Iseard's avatar
Michael Iseard committed
410

Michael Iseard's avatar
Michael Iseard committed
411
</html>