@ivcreative/accessible-vanilla-slick 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (21) hide show
  1. package/LICENSE +20 -0
  2. package/README.markdown +200 -0
  3. package/package.json +95 -0
  4. package/slick/dist/accessible-slick-theme.css +238 -0
  5. package/slick/dist/accessible-slick-theme.min.css +1 -0
  6. package/slick/dist/accessible-slick-theme.min.css.map +1 -0
  7. package/slick/dist/ajax-loader.gif +0 -0
  8. package/slick/dist/fonts/slick.eot +0 -0
  9. package/slick/dist/fonts/slick.svg +15 -0
  10. package/slick/dist/fonts/slick.ttf +0 -0
  11. package/slick/dist/fonts/slick.woff +0 -0
  12. package/slick/dist/slick-theme.css +201 -0
  13. package/slick/dist/slick-theme.min.css +1 -0
  14. package/slick/dist/slick-theme.min.css.map +1 -0
  15. package/slick/dist/slick.cjs +2109 -0
  16. package/slick/dist/slick.css +95 -0
  17. package/slick/dist/slick.esm.mjs +2087 -0
  18. package/slick/dist/slick.js +2111 -0
  19. package/slick/dist/slick.min.css +1 -0
  20. package/slick/dist/slick.min.css.map +1 -0
  21. package/slick/dist/slick.min.js +1 -0
package/LICENSE ADDED
@@ -0,0 +1,20 @@
1
+ The MIT License (MIT)
2
+
3
+ Copyright (c) 2013-2016
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy of
6
+ this software and associated documentation files (the "Software"), to deal in
7
+ the Software without restriction, including without limitation the rights to
8
+ use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
9
+ the Software, and to permit persons to whom the Software is furnished to do so,
10
+ subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
17
+ FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
18
+ COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
19
+ IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
20
+ CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
package/README.markdown ADDED
@@ -0,0 +1,200 @@
1
+ accessible-slick
2
+ ----------------
3
+
4
+ _the last (accessible) carousel you'll ever need_
5
+
6
+ A highly accessible, WCAG 2.2 compliant, drop-in replacement for Slick Slider (1.8.1) intended to make life easier for real-world dev teams who need to pass accessibility audits.
7
+
8
+ This package is a vanilla ES6 JavaScript rewrite that implements [accessibility and usability improvements](#what-makes-this-accessible) crafted and tested by native screen reader users, low vision users, and expert accessibility consultants. Built with no jQuery dependency, it maintains all the accessibility features developers need while providing modern, lightweight carousel functionality. Read on to learn more about [why this package exists](#why-is-this-needed), its [features](#what-makes-this-accessible), [how to use it](#usage), and [how you can get involved!](#contributing)
9
+
10
+ #### Demo
11
+
12
+ https://ivcreative.github.io/accessible-vanilla-slick/
13
+
14
+ Also check out this [collection of ready-to-use demos on CodePen](https://codepen.io/collection/nwRGZk) for common scenarios like hero banners, scrolling product cards, PDP thumbnail images, and more!
15
+
16
+ #### CDN
17
+
18
+ ##### Example using jsDelivr
19
+
20
+ Just add a link to the CSS file in your `<head>`:
21
+
22
+ ```html
23
+ <!-- Add the core slick.min.css -->
24
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@ivcreative/accessible-vanilla-slick@1.0.1/slick/dist/slick.min.css">
25
+
26
+ <!-- Add ONE of the theme files (accessible version or original) -->
27
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@ivcreative/accessible-vanilla-slick@1.0.1/slick/dist/accessible-slick-theme.min.css">
28
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@ivcreative/accessible-vanilla-slick@1.0.1/slick/dist/slick-theme.min.css">
29
+ ```
30
+
31
+ Then, before your closing `<body>` tag add:
32
+
33
+ ```html
34
+ <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@ivcreative/accessible-vanilla-slick@1.0.1/slick/dist/slick.min.js"></script>
35
+ ```
36
+
37
+ #### Package Managers
38
+
39
+ ```sh
40
+ npm install @ivcreative/accessible-vanilla-slick
41
+ ```
42
+
43
+ ## Why is this needed?
44
+
45
+ Almost by design, carousels are pretty hard for screen reader users (especially newbies) to understand and interact with successfully, let alone enjoy. Its hard to know where slides begin and end, how the slide navigation dots work, or where the various controls are. Carousels also vary quite a bit between sites or even just between pages, so it can be difficult for screen reader users to build up a reliable mental model that applies to ALL carousels. And let's not even get started on autoplay functionality ([WCAG 2.2.2](https://www.w3.org/WAI/WCAG21/Understanding/pause-stop-hide.html), anyone?)!
46
+
47
+ As one of the most widely used carousel packages out there, Slick Slider has many of these same accessibility issues, making it a consistent source of frustration for dev teams when they go through an accessibility audit. Efforts have been made in the Slick Slider repo to improve these issues (especially in version 1.8.1), but those efforts have also introduced new accessibility issues too!
48
+
49
+ In the long term it'd be great to contribute some improvements to the core Slick Slider repo, but that may or may not be possible considering it's [been abandoned](https://github.com/kenwheeler/slick/graphs/code-frequency) (but not deprecated) by it's original author since 2016. A maintainer or two has recently stepped up to resume development, but with over [1,000 open issues](https://github.com/kenwheeler/slick/issues?q=is%3Aissue+is%3Aopen+accessibility) and nearly [200 open PRs](https://github.com/kenwheeler/slick/pulls?q=is%3Apr+is%3Aopen+accessibility) (some with conflicting approaches), its unlikely that the big fixes needed will make their way to the master branch any time soon.
50
+
51
+ In the short term, an accessible jQuery version of Slick was created, but that project also appears to have been abandoned. This vanilla ES6 version was created as a modern alternative that steps away from the jQuery dependency entirely, providing a lightweight, maintainable, and truly accessible carousel solution for today's JavaScript ecosystem. The vanilla implementation respects the original functionality and API features as much as possible so you can improve the accessibility of your carousels **right now**! It's available through NPM and jsDelivr so upgrading is as easy as changing the URLs in your `<link>` and `<script>` tags—and unlike the original, you get modern ES6 JavaScript without any jQuery overhead!
52
+
53
+
54
+ ## What makes this accessible?
55
+
56
+ This package implements the following changes, all of which have been thoroughly tested and discussed with Accessible360's team of native screen reader users, low vision users, and experienced accessibility engineers:
57
+
58
+ ### New features ✨
59
+
60
+ <table>
61
+ <thead>
62
+ <tr>
63
+ <th scope="col" width="40%" align="left">Feature</th>
64
+ <th scope="col" align="left">Why</th>
65
+ </tr>
66
+ </thead>
67
+ <tbody>
68
+ <tr valign="top">
69
+ <th scope="row" align="left"><a href="https://github.com/Accessible360/accessible-slick/issues/7">Wrapper</a> now has <code>role="region"</code> and a configurable <code>aria-label</code>.</th>
70
+ <td>Tells screen reader users exactly where the carousel begins and ends in the DOM and gives them a landmark they can jump to or skip easily. Use the <a href="#new-settings-"><code>regionLabel</code> setting</a> to change the <code>aria-label</code> text (defaults to <code>'carousel'</code>).</td>
71
+ </tr>
72
+ <tr valign="top">
73
+ <th scope="row" align="left"><a href="https://github.com/Accessible360/accessible-slick/issues/9">Each slide</a> now has <code>role="group"</code> with a generic, numbered <code>aria-label</code>.</th>
74
+ <td>Tells screen reader users exactly where each individual slide begins and ends in the DOM. It should fit the vast majority of use cases, but if you <em>really</em> want to disable it you can do so with the new <a href="#new-settings-"><code>useGroupRole</code> setting</a>.</td>
75
+ </tr>
76
+ <tr valign="top">
77
+ <th scope="row" align="left">Enabling autoplay now automatically adds a <a href="https://github.com/Accessible360/accessible-slick/issues/13">pause/play toggle button</a> as the first focusable element (with <a href="https://github.com/Accessible360/accessible-slick/issues/20">customizable icons</a>!).</th>
78
+ <td><a href="https://www.w3.org/WAI/WCAG21/Understanding/pause-stop-hide.html">WCAG 2.2.2</a> requires that all auto-updating content comes with a way to pause, stop, or hide it. For carousels, pause/play icon buttons are the most familiar option. Since autoplay is so disruptive for keyboard and screen reader users, as well as people with certain cognitive conditions, the button is the very first piece of content in the slider so it can be reached right away.</td>
79
+ </tr>
80
+ <tr valign="top">
81
+ <th scope="row" align="left"><a href="https://github.com/Accessible360/accessible-slick/issues/18">Instructions can now be provided</a> for screen reader users</th>
82
+ <td>If your slider uses complex logic or unconventional interaction behaviors, there is a good chance that screen reader users will have an especially hard time figuring it out. If you're using the <code>asNavFor</code> setting or any of the API methods/events, you should probably explain how your carousel works to screen reader users.</td>
83
+ </tr>
84
+ <tr valign="top">
85
+ <th scope="row" align="left">The <a href="https://github.com/Accessible360/accessible-slick/issues/20">Previous and Next arrows can now be placed</a> before, after, or on either side of the slides in the DOM to match the visual design.</th>
86
+ <td>Designers can get really creative with sliders sometimes, making it difficult to ensure that all of the controls and slide contents are in a logical order in the page's DOM (<a href="https://www.w3.org/WAI/WCAG21/Understanding/meaningful-sequence.html">WCAG 1.3.2</a>) and tab sequence (<a href="https://www.w3.org/WAI/WCAG21/Understanding/focus-order.html">WCAG 2.4.3</a>). Using the new <a href="#new-features-"><code>arrowsPlacement</code> setting</a>, you can now control where the previous and next buttons are injected to better match the visual design!</td>
87
+ </tr>
88
+ <tr valign="top">
89
+ <th scope="row" align="left">A <a href="https://github.com/Accessible360/accessible-slick/issues/14">more accessible CSS theme</a> is now available with better focus styles and larger icons.</th>
90
+ <td>The original CSS theme (<code>slick-theme.min.css</code>) had very small icons and poor focus indicators. Now an alternative theme is available (<code>accessible-slick-theme.min.css</code>) with larger icons and browser-default focus indicators. To minimize risk of possible breaking styling changes, this theme is <b>opt-in</b>. Just update your <code>&lt;link&gt;</code> reference to use it! Check out the <a href="https://accessible360.github.io/accessible-slick">demo page</a> to see it in action.</td>
91
+ </tr>
92
+ <tr valign="top">
93
+ <th scope="row" align="left">When Center Mode is enabled, the <code>aria-label</code> of the <a href="https://github.com/Accessible360/accessible-slick/issues/21#issuecomment-756320112">centered slide will now be appended with the text "(centered)"</a>.</th>
94
+ <td>As shown in the <a href="https://accessible360.github.io/accessible-slick/#center-mode">original examples</a>, it is possible to apply custom styles to the centered slide to emphasize it. Since it's not possible to determine when this is done, the safest option is to just always tell screen reader users which slide is the centered one.</td>
95
+ </tr>
96
+ </tbody>
97
+ </table>
98
+
99
+ ### Feature changes ⚠️
100
+
101
+ <table>
102
+ <thead>
103
+ <tr>
104
+ <th scope="col" width="40%" align="left">Feature</th>
105
+ <th scope="col" align="left">Why</th>
106
+ </tr>
107
+ </thead>
108
+ <tbody>
109
+ <tr valign="top">
110
+ <th scope="row" align="left"><a href="https://github.com/Accessible360/accessible-slick/issues/8">Previous and Next button markup</a> improved to use less ARIA and to safely hide the icons from screen readers.</th>
111
+ <td>Per the <a href="https://www.w3.org/TR/using-aria/#rule1">First Rule of ARIA Use</a>, <code>aria-label</code> has been removed in favor of inner screen-reader-only text. Also, the HTML5 <code>disabled</code> attribute is now used instead of <code>aria-disabled</code> for more consistency across all input modalities. Finally, the custom icons are attached to inner <code>span</code>s that are properly hidden from screen readers with <code>aria-hidden</code>.</td>
112
+ </tr>
113
+ <tr valign="top">
114
+ <th scope="row" align="left">Tab markup is no longer used for <a href="https://github.com/Accessible360/accessible-slick/issues/10">slide dots</a> or <a href="https://github.com/Accessible360/accessible-slick/issues/9">slides</a>.</th>
115
+ <td>Carousels <a href="https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-1/tabs.html">don't look like tabs</a>, so real users wouldn't expect them to work like tabs, especially when there are multiple slides visible at a time.</td>
116
+ </tr>
117
+ <tr valign="top">
118
+ <th scope="row" align="left">Keyboard navigation with the <code>Left</code> and <code>Right</code> arrow keys <a href="https://github.com/Accessible360/accessible-slick/issues/15">has been removed</a>.</th>
119
+ <td>The <code>Left</code> and <code>Right</code> keys are already used by screen readers for virtual cursor navigation, and other users have no reason to expect this functionality exists without visible instructions or clues.</td>
120
+ </tr>
121
+ <tr valign="top">
122
+ <th scope="row" align="left">When slides are <a href="https://github.com/Accessible360/accessible-slick/issues/21#issuecomment-756320112">dynamically added after initialization</a>, they will now automatically get <code>role="group"</code> and a numbered <code>aria-label</code>.</th>
123
+ <td>The API expects you to supply the complete markup for each slide you add, including its wrapper. However, developers may not realize that they need to add these attributes for accessibility, so adding them automatically guarantees they're there. This also ensures backwards compatibility with any existing implementations.</td>
124
+ </tr>
125
+ </tbody>
126
+ </table>
127
+
128
+
129
+ ## Usage
130
+
131
+ All of the original events and methods, and most of the original settings, are still available and work as expected, so your existing configurations won't need to be updated at all! Refer to the original Slick Slider documentation to see how to use them:
132
+
133
+ * [Data attribute settings](https://github.com/kenwheeler/slick#data-attribute-settings)
134
+ * [Settings](https://github.com/kenwheeler/slick#settings)
135
+ * [Events](https://github.com/kenwheeler/slick#events)
136
+ * [Methods](https://github.com/kenwheeler/slick#methods)
137
+
138
+ ### New settings ✨
139
+ In addition the original functionality, the following new settings have been added:
140
+
141
+ Setting | Type | Default | Description
142
+ :-------|:-----|:--------|:-----------
143
+ arrowsPlacement | string ('beforeSlides' \| 'afterSlides' \| 'split') | null | Determines where the previous and next arrows are placed in the slider DOM, which determines their tabbing order. Arrows can be placed together before the slides or after the slides, or split so that the previous arrow is before the slides and the next arrow is after (this is the default). Use this setting to ensure the tabbing order is logical based on your visual design to fulfill [WCAG 1.3.2](https://www.w3.org/WAI/WCAG21/Understanding/meaningful-sequence.html) and [2.4.3](https://www.w3.org/WAI/WCAG21/Understanding/focus-order.html).
144
+ instructionsText | string | `null` | Instructions for screen reader users placed at the very beginning of the slider markup. **If you are using `asNavFor` or adding custom functionality with API methods/events, you probably need to supply instructions!**
145
+ pauseIcon | string (html \| jQuery selector) \| object (DOM node \| jQuery object) | `<span class="slick-pause-icon" aria-hidden="true"></span>` | Custom element to use as the "pause" icon inside the autoplay pause/play toggle button, when `autoplay` is enabled.
146
+ playIcon | string (html \| jQuery selector) \| object (DOM node \| jQuery object) | `<span class="slick-play-icon" aria-hidden="true"></span>` | Custom element to use as the "play" icon inside the autoplay pause/play toggle button, when `autoplay` is enabled.
147
+ regionLabel | string | 'carousel' | Text to use for the `aria-label` that is placed on the wrapper.
148
+ useGroupRole | boolean | true | Controls whether `role="group"` and an `aria-label` are applied to each slide.
149
+ useAutoplayToggleButton | boolean | true | Controls whether a pause/play icon button is added when autoplay is enabled. Setting this to `false` without providing an alternative control would likely violate [WCAG 2.2.2](https://www.w3.org/WAI/WCAG21/Understanding/pause-stop-hide.html), so be careful!
150
+
151
+
152
+ ### Deprecated settings ❌
153
+ The following settings have been removed from the API, but if you pass them in through your initialization function or data attributes nothing bad will happen! If any of these settings are passed in, you'll just get a soft console warning letting you know that the setting is no longer relevant.
154
+
155
+ Setting | Reason(s)
156
+ :-------|:---------
157
+ accessibility | Equal access should not be a feature that can be turned off. This setting actually made the slides _less_ accessible by introducing unintuitive tab markup, keyboard navigation that conflicts with screen readers, and more. [See issue #12](https://github.com/Accessible360/accessible-slick/issues/12).
158
+ focusOnChange | Per [WCAG 3.2.2](https://www.w3.org/WAI/WCAG21/Understanding/on-input.html) and user research, keyboard focus should never be moved unless the user is told ahead of time. Even when explained, moving focus like this would suck for keyboard users, so this setting had to go. [See issue #11](https://github.com/Accessible360/accessible-slick/issues/11).
159
+ focusOnSelect | Unnecessary since keyboard navigation has been removed. Even with keyboard navigation, tab stops on non-actionable elements is very strange for keyboard users, and really just adds work for them. [See issue #11](https://github.com/Accessible360/accessible-slick/issues/11).
160
+
161
+
162
+ ## Development
163
+ If you'd like to contribute changes or just make modifications for your own use, use the following process:
164
+
165
+ 1. Install all the dev dependencies with NPM:
166
+
167
+ ```sh
168
+ npm install
169
+ ```
170
+
171
+ 2. Make your changes to the source files. You'll want to focus on:
172
+ * `slick/slick.js`
173
+ * `slick/slick.scss`
174
+ * `slick/slick-theme.scss`
175
+
176
+ 3. Build using npm scripts (modern Sass + ESBuild pipeline):
177
+
178
+ ```sh
179
+ # Build once
180
+ npm run build
181
+
182
+ # Watch source files and rebuild on change
183
+ npm run watch
184
+ ```
185
+
186
+ 4. Check your changes by loading up `docs/index.html` in your browser.
187
+
188
+
189
+ ## Contributing
190
+
191
+ [See the contributing guidelines.](https://github.com/ivcreative/accessible-vanilla-slick/blob/master/CONTRIBUTING.md)
192
+
193
+
194
+ ## Credits
195
+
196
+ Massive kudos to [Ken Wheeler](https://github.com/kenwheeler) and the entire [Slick Slider community](https://github.com/kenwheeler/slick) for creating the original package.
197
+
198
+ The accessible jQuery fork was created by [Jason Webb](https://github.com/jasonwebb), Developer Advocate at <a href="https://accessible360.com" target="_blank">Accessible360</a>, and the team at Accessible360 who contributed extensive accessibility research, testing with native screen reader users, and expert accessibility consultation to ensure a truly accessible carousel implementation.
199
+
200
+ The vanilla version of this package was created by [Miguel Quintero](https://github.com/ivcreative) to maintain and distribute this accessible carousel as an independent, community-supported project.
package/package.json ADDED
@@ -0,0 +1,95 @@
1
+ {
2
+ "name": "@ivcreative/accessible-vanilla-slick",
3
+ "version": "1.0.2",
4
+ "description": "WCAG 2.2 compliant vanilla ES6 carousel - the last (accessible) carousel you'll ever need",
5
+ "license": "MIT",
6
+ "main": "slick/dist/slick.js",
7
+ "module": "slick/dist/slick.esm.mjs",
8
+ "style": "slick/dist/slick.min.css",
9
+ "jsdelivr": "slick/dist/slick.min.js",
10
+ "unpkg": "slick/dist/slick.min.js",
11
+ "publishConfig": {
12
+ "access": "public"
13
+ },
14
+ "files": [
15
+ "slick/dist",
16
+ "slick/dist/fonts",
17
+ "README.markdown",
18
+ "LICENSE"
19
+ ],
20
+ "repository": {
21
+ "type": "git",
22
+ "url": "https://github.com/ivcreative/accessible-vanilla-slick.git"
23
+ },
24
+ "scripts": {
25
+ "clean": "rimraf slick/dist/*.min.css slick/dist/*.min.js",
26
+ "build:css": "sass --style=compressed slick/slick.scss:slick/dist/slick.min.css slick/slick-theme.scss:slick/dist/slick-theme.min.css slick/accessible-slick-theme.scss:slick/dist/accessible-slick-theme.min.css",
27
+ "build:js": "esbuild slick/dist/slick.js --minify --outfile=slick/dist/slick.min.js",
28
+ "build": "npm run clean && npm run build:css && npm run build:js",
29
+ "prepublishOnly": "npm run build",
30
+ "pack:check": "npm pack --dry-run",
31
+ "watch:css": "sass --watch --style=compressed slick/slick.scss:slick/dist/slick.min.css slick/slick-theme.scss:slick/dist/slick-theme.min.css slick/accessible-slick-theme.scss:slick/dist/accessible-slick-theme.min.css",
32
+ "watch:js": "chokidar \"slick/dist/slick.js\" -c \"npm run build:js\"",
33
+ "watch": "npm-run-all --parallel watch:css watch:js"
34
+ },
35
+ "keywords": [
36
+ "accessible",
37
+ "accessibility",
38
+ "wcag",
39
+ "carousel",
40
+ "slick",
41
+ "responsive",
42
+ "js",
43
+ "slider",
44
+ "jquery-plugin"
45
+ ],
46
+ "author": "Miguel Quintero <mquintero@ivcreative.com>",
47
+ "contributors": [
48
+ {
49
+ "name": "Miguel Quintero",
50
+ "email": "mquintero@ivcreative.com",
51
+ "url": "https://ivcreative.com"
52
+ },
53
+ {
54
+ "name": "jason webb",
55
+ "email": "jwebb@accessible360.com",
56
+ "url": "https://accessible360.com"
57
+ },
58
+ {
59
+ "name": "ken wheeler",
60
+ "email": "ken_wheeler@me.com",
61
+ "url": "http://kenwheeler.github.io/"
62
+ },
63
+ {
64
+ "name": "simon goellner",
65
+ "email": "simey.me@gmail.com",
66
+ "url": "http://simey.me"
67
+ },
68
+ {
69
+ "name": "ahmad el-alfy",
70
+ "email": "ahmadalfy@gmail.com",
71
+ "url": "http://www.alfy.me"
72
+ },
73
+ {
74
+ "name": "leggomuhgreggo",
75
+ "email": "gwestneat@gmail.com"
76
+ },
77
+ {
78
+ "name": "ashley mcknight",
79
+ "email": "ash@sharpteef.net"
80
+ }
81
+ ],
82
+ "bugs": {
83
+ "url": "https://github.com/ivcreative/accessible-vanilla-slick/issues"
84
+ },
85
+ "engines": {
86
+ "node": ">=16.0.0"
87
+ },
88
+ "devDependencies": {
89
+ "chokidar-cli": "^3.0.0",
90
+ "esbuild": "^0.19.12",
91
+ "npm-run-all": "^4.1.5",
92
+ "rimraf": "^5.0.10",
93
+ "sass": "^1.85.1"
94
+ }
95
+ }
package/slick/dist/accessible-slick-theme.css ADDED
@@ -0,0 +1,238 @@
1
+ @charset "UTF-8";
2
+ /* Icons */
3
+ @font-face {
4
+ font-family: "slick";
5
+ src: url("./fonts/slick.eot");
6
+ src: url("./fonts/slick.eot?#iefix") format("embedded-opentype"), url("./fonts/slick.woff") format("woff"), url("./fonts/slick.ttf") format("truetype"), url("./fonts/slick.svg#slick") format("svg");
7
+ font-weight: normal;
8
+ font-style: normal;
9
+ }
10
+ /**
11
+ Slider
12
+ */
13
+ .slick-loading .slick-list {
14
+ background: #fff url("./ajax-loader.gif") center center no-repeat;
15
+ }
16
+
17
+ /*=================================
18
+ Previous and Next icon buttons
19
+ ==================================*/
20
+ .slick-prev,
21
+ .slick-next {
22
+ position: absolute;
23
+ top: 50%;
24
+ display: block;
25
+ padding: 0;
26
+ height: 20px;
27
+ width: 20px;
28
+ line-height: 0;
29
+ font-size: 0;
30
+ cursor: pointer;
31
+ background: transparent;
32
+ color: transparent;
33
+ border: none;
34
+ -webkit-transform: translate(0, -50%);
35
+ transform: translate(0, -50%);
36
+ }
37
+ .slick-prev:hover .slick-prev-icon,
38
+ .slick-prev:hover .slick-next-icon, .slick-prev:focus .slick-prev-icon,
39
+ .slick-prev:focus .slick-next-icon,
40
+ .slick-next:hover .slick-prev-icon,
41
+ .slick-next:hover .slick-next-icon,
42
+ .slick-next:focus .slick-prev-icon,
43
+ .slick-next:focus .slick-next-icon {
44
+ opacity: 1;
45
+ }
46
+ .slick-prev:focus,
47
+ .slick-next:focus {
48
+ top: calc(50% - 1px);
49
+ }
50
+ .slick-prev:focus .slick-prev-icon,
51
+ .slick-prev:focus .slick-next-icon,
52
+ .slick-next:focus .slick-prev-icon,
53
+ .slick-next:focus .slick-next-icon {
54
+ color: orange;
55
+ font-size: 28px;
56
+ margin-left: -2px;
57
+ }
58
+ .slick-prev.slick-disabled,
59
+ .slick-next.slick-disabled {
60
+ cursor: default;
61
+ }
62
+ .slick-prev.slick-disabled .slick-prev-icon,
63
+ .slick-prev.slick-disabled .slick-next-icon,
64
+ .slick-next.slick-disabled .slick-prev-icon,
65
+ .slick-next.slick-disabled .slick-next-icon {
66
+ opacity: 0.25;
67
+ }
68
+ .slick-prev .slick-prev-icon,
69
+ .slick-prev .slick-next-icon,
70
+ .slick-next .slick-prev-icon,
71
+ .slick-next .slick-next-icon {
72
+ display: block;
73
+ color: black;
74
+ opacity: 1;
75
+ font-family: "slick";
76
+ font-size: 24px;
77
+ line-height: 1;
78
+ }
79
+
80
+ .slick-prev {
81
+ left: -25px;
82
+ }
83
+ [dir=rtl] .slick-prev {
84
+ left: auto;
85
+ right: -25px;
86
+ }
87
+ .slick-prev .slick-prev-icon:before {
88
+ content: "←";
89
+ }
90
+ [dir=rtl] .slick-prev .slick-prev-icon:before {
91
+ content: "→";
92
+ }
93
+
94
+ .slick-next {
95
+ right: -25px;
96
+ }
97
+ [dir=rtl] .slick-next {
98
+ left: -25px;
99
+ right: auto;
100
+ }
101
+ .slick-next .slick-next-icon:before {
102
+ content: "→";
103
+ }
104
+ [dir=rtl] .slick-next .slick-next-icon:before {
105
+ content: "←";
106
+ }
107
+
108
+ /*==========================
109
+ Slide navigation dots
110
+ ===========================*/
111
+ .slick-slider {
112
+ margin-bottom: 30px;
113
+ }
114
+ .slick-slider.slick-dotted {
115
+ margin-bottom: 60px;
116
+ }
117
+
118
+ .slick-dots {
119
+ position: absolute;
120
+ bottom: -30px;
121
+ display: block;
122
+ padding: 0;
123
+ margin: 0;
124
+ width: 100%;
125
+ list-style: none;
126
+ text-align: center;
127
+ }
128
+ .slick-dots li {
129
+ position: relative;
130
+ display: inline-block;
131
+ margin: 0 5px;
132
+ padding: 0;
133
+ }
134
+ .slick-dots li button {
135
+ display: block;
136
+ height: 20px;
137
+ width: 20px;
138
+ margin-top: -4px;
139
+ margin-left: -4px;
140
+ line-height: 0px;
141
+ font-size: 0px;
142
+ color: transparent;
143
+ border: 0;
144
+ background: transparent;
145
+ cursor: pointer;
146
+ }
147
+ .slick-dots li button:hover .slick-dot-icon, .slick-dots li button:focus .slick-dot-icon {
148
+ opacity: 1;
149
+ }
150
+ .slick-dots li button:focus .slick-dot-icon:before {
151
+ color: orange;
152
+ }
153
+ .slick-dots li button .slick-dot-icon {
154
+ color: black;
155
+ opacity: 0.25;
156
+ }
157
+ .slick-dots li button .slick-dot-icon:before {
158
+ position: absolute;
159
+ top: 0;
160
+ left: 0;
161
+ content: "•";
162
+ font-family: "slick";
163
+ font-size: 12px;
164
+ line-height: 1;
165
+ text-align: center;
166
+ -webkit-transition: all 0.05s linear;
167
+ transition: all 0.05s linear;
168
+ }
169
+ .slick-dots li.slick-active button:focus .slick-dot-icon {
170
+ color: orange;
171
+ opacity: 1;
172
+ }
173
+ .slick-dots li.slick-active button .slick-dot-icon {
174
+ color: black;
175
+ opacity: 1;
176
+ }
177
+ .slick-dots li.slick-active button .slick-dot-icon:before {
178
+ margin-top: -3px;
179
+ margin-left: -2px;
180
+ font-size: 18px;
181
+ }
182
+
183
+ /**
184
+ Improved .sr-only class by ffoodd: https://gist.github.com/ffoodd/000b59f431e3e64e4ce1a24d5bb36034
185
+ */
186
+ .slick-sr-only {
187
+ border: 0 !important;
188
+ clip: rect(1px, 1px, 1px, 1px) !important;
189
+ clip-path: inset(50%) !important;
190
+ height: 1px !important;
191
+ margin: -1px !important;
192
+ overflow: hidden !important;
193
+ padding: 0 !important;
194
+ position: absolute !important;
195
+ width: 1px !important;
196
+ white-space: nowrap !important;
197
+ }
198
+
199
+ /*===========================
200
+ Pause/play icon button
201
+ ============================*/
202
+ .slick-autoplay-toggle-button {
203
+ position: absolute;
204
+ left: 5px;
205
+ bottom: -32px;
206
+ z-index: 10;
207
+ opacity: 1;
208
+ background: none;
209
+ border: 0;
210
+ cursor: pointer;
211
+ color: black;
212
+ }
213
+ .slick-autoplay-toggle-button:hover, .slick-autoplay-toggle-button:focus {
214
+ opacity: 1;
215
+ }
216
+ .slick-autoplay-toggle-button:focus {
217
+ color: orange;
218
+ }
219
+ .slick-autoplay-toggle-button .slick-pause-icon:before {
220
+ content: "⏸";
221
+ width: 20px;
222
+ height: 20px;
223
+ font-family: "slick";
224
+ font-size: 18px;
225
+ font-weight: normal;
226
+ line-height: 20px;
227
+ text-align: center;
228
+ }
229
+ .slick-autoplay-toggle-button .slick-play-icon:before {
230
+ content: "▶";
231
+ width: 20px;
232
+ height: 20px;
233
+ font-family: "slick";
234
+ font-size: 18px;
235
+ font-weight: normal;
236
+ line-height: 20px;
237
+ text-align: center;
238
+ }
package/slick/dist/accessible-slick-theme.min.css ADDED
@@ -0,0 +1 @@
1
+ @font-face{font-family:"slick";src:url("./fonts/slick.eot");src:url("./fonts/slick.eot?#iefix") format("embedded-opentype"),url("./fonts/slick.woff") format("woff"),url("./fonts/slick.ttf") format("truetype"),url("./fonts/slick.svg#slick") format("svg");font-weight:normal;font-style:normal}.slick-loading .slick-list{background:#fff url("./ajax-loader.gif") center center no-repeat}.slick-prev,.slick-next{position:absolute;top:50%;display:block;padding:0;height:20px;width:20px;line-height:0;font-size:0;cursor:pointer;background:rgba(0,0,0,0);color:rgba(0,0,0,0);border:none;transform:translate(0, -50%)}.slick-prev:hover .slick-prev-icon,.slick-prev:hover .slick-next-icon,.slick-prev:focus .slick-prev-icon,.slick-prev:focus .slick-next-icon,.slick-next:hover .slick-prev-icon,.slick-next:hover .slick-next-icon,.slick-next:focus .slick-prev-icon,.slick-next:focus .slick-next-icon{opacity:1}.slick-prev:focus,.slick-next:focus{top:calc(50% - 1px)}.slick-prev:focus .slick-prev-icon,.slick-prev:focus .slick-next-icon,.slick-next:focus .slick-prev-icon,.slick-next:focus .slick-next-icon{color:orange;font-size:28px;margin-left:-2px}.slick-prev.slick-disabled,.slick-next.slick-disabled{cursor:default}.slick-prev.slick-disabled .slick-prev-icon,.slick-prev.slick-disabled .slick-next-icon,.slick-next.slick-disabled .slick-prev-icon,.slick-next.slick-disabled .slick-next-icon{opacity:.25}.slick-prev .slick-prev-icon,.slick-prev .slick-next-icon,.slick-next .slick-prev-icon,.slick-next .slick-next-icon{display:block;color:#000;opacity:1;font-family:"slick";font-size:24px;line-height:1}.slick-prev{left:-25px}[dir=rtl] .slick-prev{left:auto;right:-25px}.slick-prev .slick-prev-icon:before{content:"←"}[dir=rtl] .slick-prev .slick-prev-icon:before{content:"→"}.slick-next{right:-25px}[dir=rtl] .slick-next{left:-25px;right:auto}.slick-next .slick-next-icon:before{content:"→"}[dir=rtl] .slick-next .slick-next-icon:before{content:"←"}.slick-slider{margin-bottom:30px}.slick-slider.slick-dotted{margin-bottom:60px}.slick-dots{position:absolute;bottom:-30px;display:block;padding:0;margin:0;width:100%;list-style:none;text-align:center}.slick-dots li{position:relative;display:inline-block;margin:0 5px;padding:0}.slick-dots li button{display:block;height:20px;width:20px;margin-top:-4px;margin-left:-4px;line-height:0px;font-size:0px;color:rgba(0,0,0,0);border:0;background:rgba(0,0,0,0);cursor:pointer}.slick-dots li button:hover .slick-dot-icon,.slick-dots li button:focus .slick-dot-icon{opacity:1}.slick-dots li button:focus .slick-dot-icon:before{color:orange}.slick-dots li button .slick-dot-icon{color:#000;opacity:.25}.slick-dots li button .slick-dot-icon:before{position:absolute;top:0;left:0;content:"•";font-family:"slick";font-size:12px;line-height:1;text-align:center;transition:all .05s linear}.slick-dots li.slick-active button:focus .slick-dot-icon{color:orange;opacity:1}.slick-dots li.slick-active button .slick-dot-icon{color:#000;opacity:1}.slick-dots li.slick-active button .slick-dot-icon:before{margin-top:-3px;margin-left:-2px;font-size:18px}.slick-sr-only{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}.slick-autoplay-toggle-button{position:absolute;left:5px;bottom:-32px;z-index:10;opacity:1;background:none;border:0;cursor:pointer;color:#000}.slick-autoplay-toggle-button:hover,.slick-autoplay-toggle-button:focus{opacity:1}.slick-autoplay-toggle-button:focus{color:orange}.slick-autoplay-toggle-button .slick-pause-icon:before{content:"⏸";width:20px;height:20px;font-family:"slick";font-size:18px;font-weight:normal;line-height:20px;text-align:center}.slick-autoplay-toggle-button .slick-play-icon:before{content:"▶";width:20px;height:20px;font-family:"slick";font-size:18px;font-weight:normal;line-height:20px;text-align:center}/*# sourceMappingURL=accessible-slick-theme.min.css.map */
package/slick/dist/accessible-slick-theme.min.css.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sourceRoot":"","sources":["../accessible-slick-theme.scss"],"names":[],"mappings":"CAiDE,WACE,oBACA,6BACA,kMACA,mBACA,kBASF,2BACE,iEASJ,wBAEE,kBACA,QAEA,cACA,UACA,YACA,WAEA,cACA,YACA,eACA,yBACA,oBACA,YAEA,6BAKE,wRAEE,QAzEiB,EA6ErB,oCACE,oBAEA,4IAEE,aACA,eACA,iBAKJ,sDACE,eAEA,gLAEE,QA7FqB,IAkGzB,oHAEE,cACA,MAhHgB,KAiHhB,QAxGoB,EAyGpB,YApHgB,QAqHhB,eACA,cAKJ,YACE,WAEA,sBACE,UACA,YAIA,oCACE,QAhIiB,IAkIjB,8CACE,QAlIe,IAyIvB,YACE,YAEA,sBACE,WACA,WAIA,oCACE,QAnJiB,IAqJjB,8CACE,QAvJe,IAgKvB,cACE,mBAEA,2BACE,mBAIJ,YACE,kBACA,aAEA,cACA,UACA,SACA,WAEA,gBACA,kBAEA,eACE,kBACA,qBACA,aACA,UAEA,sBACE,cACA,YACA,WACA,gBACA,iBAEA,gBACA,cACA,oBACA,SACA,yBACA,eAKE,wFACE,QArMa,EA0Mf,mDACE,aAKJ,sCACE,MA1NU,KA2NV,QAjNmB,IAmNnB,6CACE,kBACA,MACA,OAEA,QA9NY,IA+NZ,YAtOU,QAuOV,UA7NO,KA8NP,cACA,kBAEA,2BASA,yDACE,aACA,UAIJ,mDACE,MAxPQ,KAyPR,QAhPa,EAkPb,0DACE,gBACA,iBACA,eAWZ,eACE,oBACA,yCACA,wCACA,gCACA,sBACA,uBACA,2BACA,qBACA,6BACA,qBACA,8BAMF,8BACE,kBACA,SACA,aACA,WAEA,QAxRsB,EAyRtB,gBACA,SACA,eACA,MArSkB,KAuSlB,wEACE,QA9RmB,EAiSrB,oCACE,aAGF,uDACE,QA1SoB,IA2SpB,WACA,YACA,YArTgB,QAsThB,eACA,mBACA,iBACA,kBAGF,sDACE,QApTmB,IAqTnB,WACA,YACA,YAhUgB,QAiUhB,eACA,mBACA,iBACA","file":"accessible-slick-theme.min.css"}
package/slick/dist/ajax-loader.gif ADDED
Binary file
package/slick/dist/fonts/slick.eot ADDED
Binary file
package/slick/dist/fonts/slick.svg ADDED
@@ -0,0 +1,15 @@
1
+ <?xml version="1.0" standalone="no"?>
2
+ <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
3
+ <svg xmlns="http://www.w3.org/2000/svg">
4
+ <metadata>Generated by Fontastic.me</metadata>
5
+ <defs>
6
+ <font id="slick" horiz-adv-x="512">
7
+ <font-face font-family="slick" units-per-em="512" ascent="480" descent="-32"/>
8
+ <missing-glyph horiz-adv-x="512" />
9
+
10
+ <glyph glyph-name="arrow-circle-left" unicode="&#8592;" d="M402 238l0 36c0 5-2 10-5 13-4 4-8 6-13 6l-143 0 54 54c3 3 5 7 5 12 0 5-2 10-5 13l-26 26c-4 4-8 5-13 5-5 0-10-1-13-5l-104-103-26-26c-3-4-5-8-5-13 0-5 2-9 5-13l26-26 104-103c3-4 8-5 13-5 5 0 9 1 13 5l26 26c3 3 5 7 5 13 0 5-2 9-5 12l-54 54 143 0c5 0 9 2 13 6 3 3 5 8 5 13z m73 18c0-40-9-77-29-110-20-34-46-60-80-80-33-20-70-29-110-29-40 0-77 9-110 29-34 20-60 46-80 80-20 33-29 70-29 110 0 40 9 77 29 110 20 34 46 60 80 80 33 20 70 29 110 29 40 0 77-9 110-29 34-20 60-46 80-80 20-33 29-70 29-110z"/>
11
+ <glyph glyph-name="arrow-circle-right" unicode="&#8594;" d="M404 256c0 5-2 9-5 13l-26 26-104 103c-3 4-8 5-13 5-5 0-9-1-13-5l-26-26c-3-3-5-7-5-13 0-5 2-9 5-12l54-54-143 0c-5 0-9-2-13-6-3-3-5-8-5-13l0-36c0-5 2-10 5-13 4-4 8-6 13-6l143 0-54-54c-3-3-5-7-5-12 0-5 2-10 5-13l26-26c4-4 8-5 13-5 5 0 10 1 13 5l104 103 26 26c3 4 5 8 5 13z m71 0c0-40-9-77-29-110-20-34-46-60-80-80-33-20-70-29-110-29-40 0-77 9-110 29-34 20-60 46-80 80-20 33-29 70-29 110 0 40 9 77 29 110 20 34 46 60 80 80 33 20 70 29 110 29 40 0 77-9 110-29 34-20 60-46 80-80 20-33 29-70 29-110z"/>
12
+ <glyph glyph-name="circle" unicode="&#8226;" d="M475 256c0-40-9-77-29-110-20-34-46-60-80-80-33-20-70-29-110-29-40 0-77 9-110 29-34 20-60 46-80 80-20 33-29 70-29 110 0 40 9 77 29 110 20 34 46 60 80 80 33 20 70 29 110 29 40 0 77-9 110-29 34-20 60-46 80-80 20-33 29-70 29-110z"/>
13
+ <glyph glyph-name="pause" unicode="&#9208;" d="M475 457l0-402c0-5-1-9-5-13-4-4-8-5-13-5l-146 0c-5 0-9 1-13 5-4 4-5 8-5 13l0 402c0 5 1 9 5 13 4 4 8 5 13 5l146 0c5 0 9-1 13-5 4-4 5-8 5-13z m-256 0l0-402c0-5-1-9-5-13-4-4-8-5-13-5l-146 0c-5 0-9 1-13 5-4 4-5 8-5 13l0 402c0 5 1 9 5 13 4 4 8 5 13 5l146 0c5 0 9-1 13-5 4-4 5-8 5-13z"/>
14
+ <glyph glyph-name="play" unicode="&#9654;" d="M450 247l-379-211c-5-2-8-2-11-1-4 2-5 6-5 11l0 420c0 5 1 9 5 11 3 1 6 1 11-1l379-211c5-3 7-6 7-9 0-3-2-6-7-9z"/>
15
+ </font></defs></svg>
package/slick/dist/fonts/slick.ttf ADDED
Binary file
package/slick/dist/fonts/slick.woff ADDED
Binary file