├── .gitignore ├── docs ├── images │ ├── fonz1.png │ ├── fonz2.png │ ├── fonz3.png │ ├── lazyfonz1.png │ ├── lazyfonz2.png │ ├── lazyfonz3.png │ ├── lazyfonz4.png │ ├── lazyfonz5.png │ ├── lazyfonz6.png │ ├── accessible360-logo.png │ └── social-media-preview.png ├── a11y-dark.css ├── style.css └── index.html ├── slick ├── ajax-loader.gif ├── fonts │ ├── slick.eot │ ├── slick.ttf │ ├── slick.woff │ └── slick.svg ├── slick.min.css ├── slick.scss ├── slick-theme.min.css ├── accessible-slick-theme.min.css ├── slick-theme.scss ├── accessible-slick-theme.scss └── slick.min.js ├── LICENSE ├── gulpfile.js ├── CONTRIBUTING.md ├── .github └── workflows │ └── npm-publish.yml ├── gruntfile.js ├── package.json └── README.markdown /.gitignore: -------------------------------------------------------------------------------- 1 | .sass-cache 2 | node_modules -------------------------------------------------------------------------------- /docs/images/fonz1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Accessible360/accessible-slick/HEAD/docs/images/fonz1.png -------------------------------------------------------------------------------- /docs/images/fonz2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Accessible360/accessible-slick/HEAD/docs/images/fonz2.png -------------------------------------------------------------------------------- /docs/images/fonz3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Accessible360/accessible-slick/HEAD/docs/images/fonz3.png -------------------------------------------------------------------------------- /slick/ajax-loader.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Accessible360/accessible-slick/HEAD/slick/ajax-loader.gif -------------------------------------------------------------------------------- /slick/fonts/slick.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Accessible360/accessible-slick/HEAD/slick/fonts/slick.eot -------------------------------------------------------------------------------- /slick/fonts/slick.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Accessible360/accessible-slick/HEAD/slick/fonts/slick.ttf -------------------------------------------------------------------------------- /slick/fonts/slick.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Accessible360/accessible-slick/HEAD/slick/fonts/slick.woff -------------------------------------------------------------------------------- /docs/images/lazyfonz1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Accessible360/accessible-slick/HEAD/docs/images/lazyfonz1.png -------------------------------------------------------------------------------- /docs/images/lazyfonz2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Accessible360/accessible-slick/HEAD/docs/images/lazyfonz2.png -------------------------------------------------------------------------------- /docs/images/lazyfonz3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Accessible360/accessible-slick/HEAD/docs/images/lazyfonz3.png -------------------------------------------------------------------------------- /docs/images/lazyfonz4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Accessible360/accessible-slick/HEAD/docs/images/lazyfonz4.png -------------------------------------------------------------------------------- /docs/images/lazyfonz5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Accessible360/accessible-slick/HEAD/docs/images/lazyfonz5.png -------------------------------------------------------------------------------- /docs/images/lazyfonz6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Accessible360/accessible-slick/HEAD/docs/images/lazyfonz6.png -------------------------------------------------------------------------------- /docs/images/accessible360-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Accessible360/accessible-slick/HEAD/docs/images/accessible360-logo.png -------------------------------------------------------------------------------- /docs/images/social-media-preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Accessible360/accessible-slick/HEAD/docs/images/social-media-preview.png -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 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. 21 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | var uglifyJS = require('gulp-uglify'); 3 | var rename = require('gulp-rename'); 4 | var sass = require('gulp-sass'); 5 | var minifyCSS = require('gulp-clean-css'); 6 | var del = require('del'); 7 | 8 | // Remove old files 9 | gulp.task('clean', function() { 10 | return del(['slick/*.min.*']); 11 | }); 12 | 13 | // Build the CSS 14 | gulp.task('build:css', function() { 15 | return gulp.src(['slick/*.scss']) 16 | .pipe(sass().on('error', sass.logError)) 17 | .pipe(minifyCSS()) 18 | .pipe(rename({ suffix: '.min'})) 19 | .pipe(gulp.dest('slick')); 20 | }); 21 | 22 | // Build the JavaScript 23 | gulp.task('build:js', function() { 24 | return gulp.src(['slick/slick.js']) 25 | .pipe(uglifyJS()) 26 | .pipe(rename('slick.min.js')) 27 | .pipe(gulp.dest('slick')); 28 | }); 29 | 30 | // Watch source files for changes and automatically rebuild them when change are saved 31 | gulp.task('watch', function() { 32 | gulp.watch('slick/*.scss', gulp.series(['build:css'])); 33 | gulp.watch(['slick/*.js', '!slick/*.min.js'], gulp.series(['build:js'])); 34 | }); 35 | 36 | // Default task executes a fresh build of custom JS 37 | gulp.task('default', gulp.series('clean','build:js','build:css')); -------------------------------------------------------------------------------- /slick/slick.min.css: -------------------------------------------------------------------------------- 1 | .slick-slider{position:relative;display:block;box-sizing:border-box;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}.slick-list{position:relative;overflow:hidden;display:block;margin:0;padding:0}.slick-list:focus{outline:0}.slick-list.dragging{cursor:pointer}.slick-slider .slick-list,.slick-slider .slick-track{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.slick-track{position:relative;left:0;top:0;display:block;margin-left:auto;margin-right:auto}.slick-track:after,.slick-track:before{content:"";display:table}.slick-track:after{clear:both}.slick-loading .slick-track{visibility:hidden}.slick-slide{float:left;height:100%;min-height:1px;display:none}[dir=rtl] .slick-slide{float:right}.slick-slide img{display:block}.slick-slide.slick-loading img{display:none}.slick-slide.dragging img{pointer-events:none}.slick-initialized .slick-slide{display:block}.slick-loading .slick-slide{visibility:hidden}.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}.slick-arrow.slick-hidden{display:none} -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | If you feel this package can be improved in some way, please start by [proposing your change in a new Issue](https://github.com/Accessible360/accessible-slick/issues/new) before spending a bunch of time writing code! We'll talk through the problem and your proposed solution, and possibly even do some light prototyping and testing with live users with disabilities to see how it feels for real people. 2 | 3 | Please note that this package is meant to build upon the original Slick Slider repo, not necessarily replace it. This repo will be updated to incorporate newer versions of Slick Slider when/if they become available. **If you would like to propose changes that are not directly related to accessibility, please direct your proposal to the original Slick Slider repo!** 4 | 5 | When your change is given the green light and you're ready to code, [create a fork of this repository](https://docs.github.com/en/github/getting-started-with-github/fork-a-repo) and commit your changes there. [Open a pull request (PR)](https://docs.github.com/en/github/collaborating-with-issues-and-pull-requests/creating-a-pull-request) to the master branch of this repo and we'll get that sucker integrated! 6 | 7 | **If your change is really minor (like a spelling or formatting fix), feel free to just go ahead and open up a pull request and skip the prior validation!** We'll review and discuss your changes in the PR directly, if needed. -------------------------------------------------------------------------------- /.github/workflows/npm-publish.yml: -------------------------------------------------------------------------------- 1 | # This workflow will run tests using node and then publish a package to GitHub Packages when a release is created 2 | # For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages 3 | 4 | name: Node.js Package 5 | 6 | on: 7 | release 8 | 9 | jobs: 10 | build: 11 | runs-on: ubuntu-latest 12 | steps: 13 | - uses: actions/checkout@v2 14 | - uses: actions/setup-node@v1 15 | with: 16 | node-version: 12 17 | - run: npm ci 18 | - run: npm test 19 | 20 | publish-npm: 21 | needs: build 22 | runs-on: ubuntu-latest 23 | steps: 24 | - uses: actions/checkout@v2 25 | - uses: actions/setup-node@v1 26 | with: 27 | node-version: 12 28 | registry-url: https://registry.npmjs.org/ 29 | - run: npm ci 30 | - run: npm publish --access public 31 | env: 32 | NODE_AUTH_TOKEN: ${{secrets.npm_token}} 33 | 34 | publish-gpr: 35 | needs: build 36 | runs-on: ubuntu-latest 37 | steps: 38 | - uses: actions/checkout@v2 39 | - uses: actions/setup-node@v1 40 | with: 41 | node-version: 12 42 | registry-url: https://npm.pkg.github.com/ 43 | - run: npm ci 44 | - run: npm publish --access public 45 | env: 46 | NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}} 47 | -------------------------------------------------------------------------------- /gruntfile.js: -------------------------------------------------------------------------------- 1 | var sass = require('node-sass'); 2 | 3 | module.exports = function(grunt) { 4 | grunt.initConfig({ 5 | // Convert Sass to CSS 6 | sass: { 7 | options: { 8 | implementation: sass 9 | }, 10 | dist: { 11 | files: { 12 | 'slick/slick.min.css': 'slick/slick.scss', 13 | 'slick/slick-theme.min.css': 'slick/slick-theme.scss' 14 | } 15 | } 16 | }, 17 | 18 | // Add vendor prefixes to CSS 19 | postcss: { 20 | options: { 21 | map: false, 22 | processors: [ 23 | require('autoprefixer')({ 24 | browsers: ['last 2 versions'], 25 | }), 26 | ], 27 | }, 28 | dist: { 29 | src: 'slick/*.min.css', 30 | expand: true 31 | }, 32 | }, 33 | 34 | // Minify the CSS 35 | cssmin: { 36 | target: { 37 | files: [ 38 | { 39 | expand: true, 40 | cwd: 'slick/', 41 | src: '*.min.css', 42 | dest: 'slick/' 43 | }, 44 | ], 45 | }, 46 | }, 47 | 48 | // Minify the JavaScript 49 | uglify: { 50 | target: { 51 | files: [{ 52 | expand: true, 53 | cwd: 'slick/', 54 | src: '*.js', 55 | dest: 'slick/', 56 | ext: '.min.js' 57 | }] 58 | } 59 | }, 60 | 61 | // Automatically kick off rebuilds when source file changes are detected 62 | watch: { 63 | css: { 64 | files: ['slick/*.scss'], 65 | tasks: ['sass','postcss','cssmin'] 66 | }, 67 | js: { 68 | files: ['slick/*.js','!slick/*.min.js'], 69 | tasks: ['uglify'] 70 | } 71 | } 72 | }); 73 | 74 | grunt.loadNpmTasks('grunt-sass'); 75 | grunt.loadNpmTasks('grunt-postcss'); 76 | grunt.loadNpmTasks('grunt-contrib-cssmin'); 77 | grunt.loadNpmTasks('grunt-contrib-uglify'); 78 | grunt.loadNpmTasks('grunt-contrib-watch'); 79 | 80 | grunt.registerTask('default', ['sass','postcss','cssmin', 'uglify']); 81 | }; -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@accessible360/accessible-slick", 3 | "version": "1.0.1", 4 | "description": "the last (accessible) carousel you'll ever need", 5 | "main": "slick/slick.js", 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/Accessible360/accessible-slick.git" 9 | }, 10 | "keywords": [ 11 | "accessible", 12 | "accessibility", 13 | "wcag", 14 | "carousel", 15 | "slick", 16 | "responsive", 17 | "js", 18 | "slider", 19 | "jquery-plugin" 20 | ], 21 | "author": "Accessible360 ", 22 | "contributors": [ 23 | { 24 | "name": "jason webb", 25 | "email": "jwebb@accessible360.com", 26 | "url": "https://accessible360.com" 27 | }, 28 | { 29 | "name": "ken wheeler", 30 | "email": "ken_wheeler@me.com", 31 | "url": "http://kenwheeler.github.io/" 32 | }, 33 | { 34 | "name": "simon goellner", 35 | "email": "simey.me@gmail.com", 36 | "url": "http://simey.me" 37 | }, 38 | { 39 | "name": "ahmad el-alfy", 40 | "email": "ahmadalfy@gmail.com", 41 | "url": "http://www.alfy.me" 42 | }, 43 | { 44 | "name": "leggomuhgreggo", 45 | "email": "gwestneat@gmail.com" 46 | }, 47 | { 48 | "name": "ashley mcknight", 49 | "email": "ash@sharpteef.net" 50 | } 51 | ], 52 | "license": "MIT", 53 | "bugs": { 54 | "url": "https://github.com/Accessible360/accessible-slick/issues" 55 | }, 56 | "peerDependencies": { 57 | "jquery": ">=1.8.0" 58 | }, 59 | "devDependencies": { 60 | "autoprefixer": "^9.8.6", 61 | "del": "^5.1.0", 62 | "grunt": "^1.2.1", 63 | "grunt-contrib-cssmin": "^3.0.0", 64 | "grunt-contrib-sass": "^1.0.0", 65 | "grunt-contrib-uglify": "^5.0.0", 66 | "grunt-postcss": "^0.9.0", 67 | "grunt-sass": "^3.1.0", 68 | "gulp": "^4.0.2", 69 | "gulp-clean-css": "^4.3.0", 70 | "gulp-rename": "^2.0.0", 71 | "gulp-sass": "^4.1.0", 72 | "gulp-uglify": "^3.0.2", 73 | "node-sass": "^4.14.1" 74 | } 75 | } 76 | -------------------------------------------------------------------------------- /slick/slick.scss: -------------------------------------------------------------------------------- 1 | /* Slider */ 2 | 3 | .slick-slider { 4 | position: relative; 5 | display: block; 6 | box-sizing: border-box; 7 | -webkit-touch-callout: none; 8 | -webkit-user-select: none; 9 | -khtml-user-select: none; 10 | -moz-user-select: none; 11 | -ms-user-select: none; 12 | user-select: none; 13 | -ms-touch-action: pan-y; 14 | touch-action: pan-y; 15 | -webkit-tap-highlight-color: transparent; 16 | } 17 | .slick-list { 18 | position: relative; 19 | overflow: hidden; 20 | display: block; 21 | margin: 0; 22 | padding: 0; 23 | 24 | &:focus { 25 | outline: none; 26 | } 27 | 28 | &.dragging { 29 | cursor: pointer; 30 | } 31 | } 32 | .slick-slider .slick-track, 33 | .slick-slider .slick-list { 34 | -webkit-transform: translate3d(0, 0, 0); 35 | -moz-transform: translate3d(0, 0, 0); 36 | -ms-transform: translate3d(0, 0, 0); 37 | -o-transform: translate3d(0, 0, 0); 38 | transform: translate3d(0, 0, 0); 39 | } 40 | 41 | .slick-track { 42 | position: relative; 43 | left: 0; 44 | top: 0; 45 | display: block; 46 | margin-left: auto; 47 | margin-right: auto; 48 | 49 | &:before, 50 | &:after { 51 | content: ""; 52 | display: table; 53 | } 54 | 55 | &:after { 56 | clear: both; 57 | } 58 | 59 | .slick-loading & { 60 | visibility: hidden; 61 | } 62 | } 63 | .slick-slide { 64 | float: left; 65 | height: 100%; 66 | min-height: 1px; 67 | [dir="rtl"] & { 68 | float: right; 69 | } 70 | img { 71 | display: block; 72 | } 73 | &.slick-loading img { 74 | display: none; 75 | } 76 | 77 | display: none; 78 | 79 | &.dragging img { 80 | pointer-events: none; 81 | } 82 | 83 | .slick-initialized & { 84 | display: block; 85 | } 86 | 87 | .slick-loading & { 88 | visibility: hidden; 89 | } 90 | 91 | .slick-vertical & { 92 | display: block; 93 | height: auto; 94 | border: 1px solid transparent; 95 | } 96 | } 97 | .slick-arrow.slick-hidden { 98 | display: none; 99 | } -------------------------------------------------------------------------------- /slick/fonts/slick.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Generated by Fontastic.me 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /docs/a11y-dark.css: -------------------------------------------------------------------------------- 1 | /** 2 | * a11y-dark theme for JavaScript, CSS, and HTML 3 | * Based on the okaidia theme: https://github.com/PrismJS/prism/blob/gh-pages/themes/prism-okaidia.css 4 | * @author ericwbailey 5 | */ 6 | 7 | code[class*="language-"], 8 | pre[class*="language-"] { 9 | color: #f8f8f2; 10 | background: none; 11 | font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; 12 | text-align: left; 13 | white-space: pre; 14 | word-spacing: normal; 15 | word-break: normal; 16 | word-wrap: normal; 17 | line-height: 1.5; 18 | 19 | -moz-tab-size: 4; 20 | -o-tab-size: 4; 21 | tab-size: 4; 22 | 23 | -webkit-hyphens: none; 24 | -moz-hyphens: none; 25 | -ms-hyphens: none; 26 | hyphens: none; 27 | } 28 | 29 | /* Code blocks */ 30 | pre[class*="language-"] { 31 | padding: 1em; 32 | margin: 0.5em 0; 33 | overflow: auto; 34 | border-radius: 0.3em; 35 | } 36 | 37 | :not(pre) > code[class*="language-"], 38 | pre[class*="language-"] { 39 | background: #2b2b2b; 40 | } 41 | 42 | /* Inline code */ 43 | :not(pre) > code[class*="language-"] { 44 | padding: 0.1em; 45 | border-radius: 0.3em; 46 | white-space: normal; 47 | } 48 | 49 | .token.comment, 50 | .token.prolog, 51 | .token.doctype, 52 | .token.cdata { 53 | color: #d4d0ab; 54 | } 55 | 56 | .token.punctuation { 57 | color: #fefefe; 58 | } 59 | 60 | .token.property, 61 | .token.tag, 62 | .token.constant, 63 | .token.symbol, 64 | .token.deleted { 65 | color: #ffa07a; 66 | } 67 | 68 | .token.boolean, 69 | .token.number { 70 | color: #00e0e0; 71 | } 72 | 73 | .token.selector, 74 | .token.attr-name, 75 | .token.string, 76 | .token.char, 77 | .token.builtin, 78 | .token.inserted { 79 | color: #abe338; 80 | } 81 | 82 | .token.operator, 83 | .token.entity, 84 | .token.url, 85 | .language-css .token.string, 86 | .style .token.string, 87 | .token.variable { 88 | color: #00e0e0; 89 | } 90 | 91 | .token.atrule, 92 | .token.attr-value, 93 | .token.function { 94 | color: #ffd700; 95 | } 96 | 97 | .token.keyword { 98 | color: #00e0e0; 99 | } 100 | 101 | .token.regex, 102 | .token.important { 103 | color: #ffd700; 104 | } 105 | 106 | .token.important, 107 | .token.bold { 108 | font-weight: bold; 109 | } 110 | .token.italic { 111 | font-style: italic; 112 | } 113 | 114 | .token.entity { 115 | cursor: help; 116 | } 117 | 118 | @media screen and (-ms-high-contrast: active) { 119 | code[class*="language-"], 120 | pre[class*="language-"] { 121 | color: windowText; 122 | background: window; 123 | } 124 | 125 | :not(pre) > code[class*="language-"], 126 | pre[class*="language-"] { 127 | background: window; 128 | } 129 | 130 | .token.important { 131 | background: highlight; 132 | color: window; 133 | font-weight: normal; 134 | } 135 | 136 | .token.atrule, 137 | .token.attr-value, 138 | .token.function, 139 | .token.keyword, 140 | .token.operator, 141 | .token.selector { 142 | font-weight: bold; 143 | } 144 | 145 | .token.attr-value, 146 | .token.comment, 147 | .token.doctype, 148 | .token.function, 149 | .token.keyword, 150 | .token.operator, 151 | .token.property, 152 | .token.string { 153 | color: highlight; 154 | } 155 | 156 | .token.attr-value, 157 | .token.url { 158 | font-weight: normal; 159 | } 160 | } 161 | -------------------------------------------------------------------------------- /slick/slick-theme.min.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8";.slick-loading .slick-list{background:#fff url(ajax-loader.gif) center center no-repeat}@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:400;font-style:normal}.slick-next,.slick-prev{position:absolute;display:block;height:20px;width:20px;line-height:0;font-size:0;cursor:pointer;background:0 0;color:transparent;top:50%;-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%);padding:0;border:none;outline:0}.slick-next:focus .slick-next-icon:before,.slick-next:focus .slick-prev-icon:before,.slick-next:hover .slick-next-icon:before,.slick-next:hover .slick-prev-icon:before,.slick-prev:focus .slick-next-icon:before,.slick-prev:focus .slick-prev-icon:before,.slick-prev:hover .slick-next-icon:before,.slick-prev:hover .slick-prev-icon:before{opacity:1}.slick-next.slick-disabled,.slick-prev.slick-disabled{cursor:default}.slick-next.slick-disabled .slick-next-icon:before,.slick-next.slick-disabled .slick-prev-icon:before,.slick-prev.slick-disabled .slick-next-icon:before,.slick-prev.slick-disabled .slick-prev-icon:before{opacity:.25}.slick-next .slick-next-icon:before,.slick-next .slick-prev-icon:before,.slick-prev .slick-next-icon:before,.slick-prev .slick-prev-icon:before{font-family:slick;font-size:20px;line-height:1;color:#fff;opacity:.75;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.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-dotted.slick-slider{margin-bottom:30px}.slick-dots{position:absolute;bottom:-25px;list-style:none;display:block;text-align:center;padding:0;margin:0;width:100%}.slick-dots li{position:relative;display:inline-block;height:20px;width:20px;margin:0 5px;padding:0;cursor:pointer}.slick-dots li button{border:0;background:0 0;display:block;height:20px;width:20px;outline:0;line-height:0;font-size:0;color:transparent;padding:5px;cursor:pointer}.slick-dots li button:focus,.slick-dots li button:hover{outline:0}.slick-dots li button:focus .slick-dot-icon,.slick-dots li button:hover .slick-dot-icon{opacity:1}.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:"•";width:20px;height:20px;font-family:slick;font-size:6px;line-height:20px;text-align:center}.slick-dots li.slick-active button .slick-dot-icon{color:#000;opacity:.75}.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:-25px;z-index:10;opacity:.75;background:0 0;border:0;cursor:pointer}.slick-autoplay-toggle-button:focus,.slick-autoplay-toggle-button:hover{outline:0;opacity:1}.slick-autoplay-toggle-button .slick-pause-icon:before{content:"⏸";width:20px;height:20px;font-family:slick;font-size:16px;line-height:20px;text-align:center}.slick-autoplay-toggle-button .slick-play-icon:before{content:"▶";width:20px;height:20px;font-family:slick;font-size:16px;line-height:20px;text-align:center} -------------------------------------------------------------------------------- /slick/accessible-slick-theme.min.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8";@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:400;font-style:normal}.slick-loading .slick-list{background:#fff url(ajax-loader.gif) center center no-repeat}.slick-next,.slick-prev{position:absolute;top:50%;display:block;padding:0;height:20px;width:20px;line-height:0;font-size:0;cursor:pointer;background:0 0;color:transparent;border:none;transform:translate(0,-50%)}.slick-next:focus .slick-next-icon,.slick-next:focus .slick-prev-icon,.slick-next:hover .slick-next-icon,.slick-next:hover .slick-prev-icon,.slick-prev:focus .slick-next-icon,.slick-prev:focus .slick-prev-icon,.slick-prev:hover .slick-next-icon,.slick-prev:hover .slick-prev-icon{opacity:1}.slick-next:focus,.slick-prev:focus{top:calc(50% - 1px)}.slick-next:focus .slick-next-icon,.slick-next:focus .slick-prev-icon,.slick-prev:focus .slick-next-icon,.slick-prev:focus .slick-prev-icon{color:orange;font-size:28px;margin-left:-2px}.slick-next.slick-disabled,.slick-prev.slick-disabled{cursor:default}.slick-next.slick-disabled .slick-next-icon,.slick-next.slick-disabled .slick-prev-icon,.slick-prev.slick-disabled .slick-next-icon,.slick-prev.slick-disabled .slick-prev-icon{opacity:.25}.slick-next .slick-next-icon,.slick-next .slick-prev-icon,.slick-prev .slick-next-icon,.slick-prev .slick-prev-icon{display:block;color:#000;opacity:.75;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:0;font-size:0;color:transparent;border:0;background:0 0;cursor:pointer}.slick-dots li button:focus .slick-dot-icon,.slick-dots li button:hover .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:.75;background:0 0;border:0;cursor:pointer;color:#000}.slick-autoplay-toggle-button:focus,.slick-autoplay-toggle-button:hover{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:400;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:400;line-height:20px;text-align:center} -------------------------------------------------------------------------------- /slick/slick-theme.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | // Default Variables 4 | 5 | // Slick icon entity codes outputs the following 6 | // "\2190" outputs ascii character "←" 7 | // "\2192" outputs ascii character "→" 8 | // "\2022" outputs ascii character "•" 9 | // "\23f8" outputs ascii character "⏸" 10 | // "\25b6" outputs ascii character "▶" 11 | 12 | $slick-font-path: "./fonts/" !default; 13 | $slick-font-family: "slick" !default; 14 | $slick-loader-path: "./" !default; 15 | $slick-arrow-color: white !default; 16 | $slick-dot-color: black !default; 17 | $slick-dot-color-active: $slick-dot-color !default; 18 | $slick-prev-character: "\2190" !default; 19 | $slick-next-character: "\2192" !default; 20 | $slick-dot-character: "\2022" !default; 21 | $slick-pause-character: "\23f8" !default; 22 | $slick-play-character: "\25b6" !default; 23 | $slick-dot-size: 6px !default; 24 | $slick-opacity-default: 0.75 !default; 25 | $slick-opacity-on-hover: 1 !default; 26 | $slick-opacity-not-active: 0.25 !default; 27 | 28 | @function slick-image-url($url) { 29 | @if function-exists(image-url) { 30 | @return image-url($url); 31 | } 32 | @else { 33 | @return url($slick-loader-path + $url); 34 | } 35 | } 36 | 37 | @function slick-font-url($url) { 38 | @if function-exists(font-url) { 39 | @return font-url($url); 40 | } 41 | @else { 42 | @return url($slick-font-path + $url); 43 | } 44 | } 45 | 46 | /* Slider */ 47 | 48 | .slick-list { 49 | .slick-loading & { 50 | background: #fff slick-image-url("ajax-loader.gif") center center no-repeat; 51 | } 52 | } 53 | 54 | /* Icons */ 55 | @if $slick-font-family == "slick" { 56 | @font-face { 57 | font-family: "slick"; 58 | src: slick-font-url("slick.eot"); 59 | src: slick-font-url("slick.eot?#iefix") format("embedded-opentype"), slick-font-url("slick.woff") format("woff"), slick-font-url("slick.ttf") format("truetype"), slick-font-url("slick.svg#slick") format("svg"); 60 | font-weight: normal; 61 | font-style: normal; 62 | } 63 | } 64 | 65 | /* Arrows */ 66 | 67 | .slick-prev, 68 | .slick-next { 69 | position: absolute; 70 | display: block; 71 | height: 20px; 72 | width: 20px; 73 | line-height: 0px; 74 | font-size: 0px; 75 | cursor: pointer; 76 | background: transparent; 77 | color: transparent; 78 | top: 50%; 79 | -webkit-transform: translate(0, -50%); 80 | -ms-transform: translate(0, -50%); 81 | transform: translate(0, -50%); 82 | padding: 0; 83 | border: none; 84 | outline: none; 85 | 86 | &:hover, &:focus { 87 | .slick-prev-icon, .slick-next-icon { 88 | &:before { 89 | opacity: $slick-opacity-on-hover; 90 | } 91 | } 92 | } 93 | 94 | &.slick-disabled { 95 | cursor: default; 96 | 97 | .slick-prev-icon, .slick-next-icon { 98 | &:before { 99 | opacity: $slick-opacity-not-active; 100 | } 101 | } 102 | } 103 | 104 | .slick-prev-icon, .slick-next-icon { 105 | &:before { 106 | font-family: $slick-font-family; 107 | font-size: 20px; 108 | line-height: 1; 109 | color: $slick-arrow-color; 110 | opacity: $slick-opacity-default; 111 | -webkit-font-smoothing: antialiased; 112 | -moz-osx-font-smoothing: grayscale; 113 | } 114 | } 115 | } 116 | 117 | .slick-prev { 118 | left: -25px; 119 | [dir="rtl"] & { 120 | left: auto; 121 | right: -25px; 122 | } 123 | 124 | .slick-prev-icon { 125 | &:before { 126 | content: $slick-prev-character; 127 | [dir="rtl"] & { 128 | content: $slick-next-character; 129 | } 130 | } 131 | } 132 | } 133 | 134 | .slick-next { 135 | right: -25px; 136 | [dir="rtl"] & { 137 | left: -25px; 138 | right: auto; 139 | } 140 | 141 | .slick-next-icon { 142 | &:before { 143 | content: $slick-next-character; 144 | [dir="rtl"] & { 145 | content: $slick-prev-character; 146 | } 147 | } 148 | } 149 | } 150 | 151 | /* Dots */ 152 | 153 | .slick-dotted.slick-slider { 154 | margin-bottom: 30px; 155 | } 156 | 157 | .slick-dots { 158 | position: absolute; 159 | bottom: -25px; 160 | list-style: none; 161 | display: block; 162 | text-align: center; 163 | padding: 0; 164 | margin: 0; 165 | width: 100%; 166 | li { 167 | position: relative; 168 | display: inline-block; 169 | height: 20px; 170 | width: 20px; 171 | margin: 0 5px; 172 | padding: 0; 173 | cursor: pointer; 174 | button { 175 | border: 0; 176 | background: transparent; 177 | display: block; 178 | height: 20px; 179 | width: 20px; 180 | outline: none; 181 | line-height: 0px; 182 | font-size: 0px; 183 | color: transparent; 184 | padding: 5px; 185 | cursor: pointer; 186 | &:hover, &:focus { 187 | outline: none; 188 | .slick-dot-icon { 189 | opacity: $slick-opacity-on-hover; 190 | } 191 | } 192 | .slick-dot-icon { 193 | color: $slick-dot-color; 194 | opacity: $slick-opacity-not-active; 195 | &:before { 196 | position: absolute; 197 | top: 0; 198 | left: 0; 199 | content: $slick-dot-character; 200 | width: 20px; 201 | height: 20px; 202 | font-family: $slick-font-family; 203 | font-size: $slick-dot-size; 204 | line-height: 20px; 205 | text-align: center; 206 | } 207 | } 208 | } 209 | &.slick-active button .slick-dot-icon { 210 | color: $slick-dot-color-active; 211 | opacity: $slick-opacity-default; 212 | } 213 | } 214 | } 215 | 216 | /** 217 | Improved .sr-only class by ffoodd: https://gist.github.com/ffoodd/000b59f431e3e64e4ce1a24d5bb36034 218 | */ 219 | .slick-sr-only { 220 | border: 0 !important; 221 | clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */ 222 | -webkit-clip-path: inset(50%) !important; 223 | clip-path: inset(50%) !important; /* 2 */ 224 | height: 1px !important; 225 | margin: -1px !important; 226 | overflow: hidden !important; 227 | padding: 0 !important; 228 | position: absolute !important; 229 | width: 1px !important; 230 | white-space: nowrap !important; /* 3 */ 231 | } 232 | 233 | .slick-autoplay-toggle-button { 234 | position: absolute; 235 | left: 5px; 236 | bottom: -25px; 237 | z-index: 10; 238 | 239 | opacity: $slick-opacity-default; 240 | background: none; 241 | border: 0; 242 | cursor: pointer; 243 | 244 | &:hover, &:focus { 245 | outline: none; 246 | opacity: $slick-opacity-on-hover; 247 | } 248 | 249 | .slick-pause-icon:before { 250 | content: $slick-pause-character; 251 | width: 20px; 252 | height: 20px; 253 | font-family: $slick-font-family; 254 | font-size: 16px; 255 | line-height: 20px; 256 | text-align: center; 257 | } 258 | 259 | .slick-play-icon:before { 260 | content: $slick-play-character; 261 | width: 20px; 262 | height: 20px; 263 | font-family: $slick-font-family; 264 | font-size: 16px; 265 | line-height: 20px; 266 | text-align: center; 267 | } 268 | } -------------------------------------------------------------------------------- /slick/accessible-slick-theme.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | // Default Variables 4 | 5 | // Slick icon entity codes outputs the following 6 | // "\2190" outputs ascii character "←" 7 | // "\2192" outputs ascii character "→" 8 | // "\2022" outputs ascii character "•" 9 | // "\23f8" outputs ascii character "⏸" 10 | // "\25b6" outputs ascii character "▶" 11 | 12 | $slick-font-path: "./fonts/" !default; 13 | $slick-font-family: "slick" !default; 14 | $slick-loader-path: "./" !default; 15 | $slick-arrow-color: black !default; 16 | $slick-dot-color: black !default; 17 | $slick-dot-color-active: $slick-dot-color !default; 18 | $slick-prev-character: "\2190" !default; 19 | $slick-next-character: "\2192" !default; 20 | $slick-dot-character: "\2022" !default; 21 | $slick-pause-character: "\23f8" !default; 22 | $slick-play-character: "\25b6" !default; 23 | $slick-dot-size: 12px !default; 24 | $slick-opacity-default: 0.75 !default; 25 | $slick-opacity-active: 1 !default; 26 | $slick-opacity-not-active: 0.25 !default; 27 | 28 | @function slick-image-url($url) { 29 | @if function-exists(image-url) { 30 | @return image-url($url); 31 | } 32 | 33 | @else { 34 | @return url($slick-loader-path + $url); 35 | } 36 | } 37 | 38 | @function slick-font-url($url) { 39 | @if function-exists(font-url) { 40 | @return font-url($url); 41 | } 42 | 43 | @else { 44 | @return url($slick-font-path + $url); 45 | } 46 | } 47 | 48 | /* Icons */ 49 | @if $slick-font-family=="slick" { 50 | @font-face { 51 | font-family: "slick"; 52 | src: slick-font-url("slick.eot"); 53 | src: slick-font-url("slick.eot?#iefix") format("embedded-opentype"), slick-font-url("slick.woff") format("woff"), slick-font-url("slick.ttf") format("truetype"), slick-font-url("slick.svg#slick") format("svg"); 54 | font-weight: normal; 55 | font-style: normal; 56 | } 57 | } 58 | 59 | /** 60 | Slider 61 | */ 62 | 63 | .slick-list { 64 | .slick-loading & { 65 | background: #fff slick-image-url("ajax-loader.gif") center center no-repeat; 66 | } 67 | } 68 | 69 | 70 | 71 | /*================================= 72 | Previous and Next icon buttons 73 | ==================================*/ 74 | .slick-prev, 75 | .slick-next { 76 | position: absolute; 77 | top: 50%; 78 | 79 | display: block; 80 | padding: 0; 81 | height: 20px; 82 | width: 20px; 83 | 84 | line-height: 0; 85 | font-size: 0; 86 | cursor: pointer; 87 | background: transparent; 88 | color: transparent; 89 | border: none; 90 | 91 | transform: translate(0, -50%); 92 | 93 | // Hover and focus states 94 | &:hover, 95 | &:focus { 96 | .slick-prev-icon, 97 | .slick-next-icon { 98 | opacity: $slick-opacity-active; 99 | } 100 | } 101 | 102 | &:focus { 103 | top: calc(50% - 1px); 104 | 105 | .slick-prev-icon, 106 | .slick-next-icon { 107 | color: orange; 108 | font-size: 28px; 109 | margin-left: -2px; 110 | } 111 | } 112 | 113 | // Disabled state 114 | &.slick-disabled { 115 | cursor: default; 116 | 117 | .slick-prev-icon, 118 | .slick-next-icon { 119 | opacity: $slick-opacity-not-active; 120 | } 121 | } 122 | 123 | // Inner icons 124 | .slick-prev-icon, 125 | .slick-next-icon { 126 | display: block; 127 | color: $slick-arrow-color; 128 | opacity: $slick-opacity-default; 129 | font-family: $slick-font-family; 130 | font-size: 24px; 131 | line-height: 1; 132 | } 133 | } 134 | 135 | // Previous button 136 | .slick-prev { 137 | left: -25px; 138 | 139 | [dir="rtl"] & { 140 | left: auto; 141 | right: -25px; 142 | } 143 | 144 | .slick-prev-icon { 145 | &:before { 146 | content: $slick-prev-character; 147 | 148 | [dir="rtl"] & { 149 | content: $slick-next-character; 150 | } 151 | } 152 | } 153 | } 154 | 155 | // Next button 156 | .slick-next { 157 | right: -25px; 158 | 159 | [dir="rtl"] & { 160 | left: -25px; 161 | right: auto; 162 | } 163 | 164 | .slick-next-icon { 165 | &:before { 166 | content: $slick-next-character; 167 | 168 | [dir="rtl"] & { 169 | content: $slick-prev-character; 170 | } 171 | } 172 | } 173 | } 174 | 175 | /*========================== 176 | Slide navigation dots 177 | ===========================*/ 178 | .slick-slider { 179 | margin-bottom: 30px; 180 | 181 | &.slick-dotted { 182 | margin-bottom: 60px; 183 | } 184 | } 185 | 186 | .slick-dots { 187 | position: absolute; 188 | bottom: -30px; 189 | 190 | display: block; 191 | padding: 0; 192 | margin: 0; 193 | width: 100%; 194 | 195 | list-style: none; 196 | text-align: center; 197 | 198 | li { 199 | position: relative; 200 | display: inline-block; 201 | margin: 0 5px; 202 | padding: 0; 203 | 204 | button { 205 | display: block; 206 | height: 20px; 207 | width: 20px; 208 | margin-top: -4px; 209 | margin-left: -4px; 210 | 211 | line-height: 0px; 212 | font-size: 0px; 213 | color: transparent; 214 | border: 0; 215 | background: transparent; 216 | cursor: pointer; 217 | 218 | // Hover and focus states 219 | &:hover, 220 | &:focus { 221 | .slick-dot-icon { 222 | opacity: $slick-opacity-active; 223 | } 224 | } 225 | 226 | &:focus { 227 | .slick-dot-icon:before { 228 | color: orange; 229 | } 230 | } 231 | 232 | // Inner dot icons 233 | .slick-dot-icon { 234 | color: $slick-dot-color; 235 | opacity: $slick-opacity-not-active; 236 | 237 | &:before { 238 | position: absolute; 239 | top: 0; 240 | left: 0; 241 | 242 | content: $slick-dot-character; 243 | font-family: $slick-font-family; 244 | font-size: $slick-dot-size; 245 | line-height: 1; 246 | text-align: center; 247 | 248 | transition: all .05s linear; 249 | } 250 | } 251 | } 252 | 253 | // Active dot 254 | &.slick-active { 255 | button { 256 | &:focus { 257 | .slick-dot-icon { 258 | color: orange; 259 | opacity: 1; 260 | } 261 | } 262 | 263 | .slick-dot-icon { 264 | color: $slick-dot-color-active; 265 | opacity: $slick-opacity-active; 266 | 267 | &:before { 268 | margin-top: -3px; 269 | margin-left: -2px; 270 | font-size: 18px; 271 | } 272 | } 273 | } 274 | } 275 | } 276 | } 277 | 278 | /** 279 | Improved .sr-only class by ffoodd: https://gist.github.com/ffoodd/000b59f431e3e64e4ce1a24d5bb36034 280 | */ 281 | .slick-sr-only { 282 | border: 0 !important; 283 | clip: rect(1px, 1px, 1px, 1px) !important; 284 | -webkit-clip-path: inset(50%) !important; 285 | clip-path: inset(50%) !important; 286 | height: 1px !important; 287 | margin: -1px !important; 288 | overflow: hidden !important; 289 | padding: 0 !important; 290 | position: absolute !important; 291 | width: 1px !important; 292 | white-space: nowrap !important; 293 | } 294 | 295 | /*=========================== 296 | Pause/play icon button 297 | ============================*/ 298 | .slick-autoplay-toggle-button { 299 | position: absolute; 300 | left: 5px; 301 | bottom: -32px; 302 | z-index: 10; 303 | 304 | opacity: $slick-opacity-default; 305 | background: none; 306 | border: 0; 307 | cursor: pointer; 308 | color: $slick-arrow-color; 309 | 310 | &:hover, &:focus { 311 | opacity: $slick-opacity-active; 312 | } 313 | 314 | &:focus { 315 | color: orange; 316 | } 317 | 318 | .slick-pause-icon:before { 319 | content: $slick-pause-character; 320 | width: 20px; 321 | height: 20px; 322 | font-family: $slick-font-family; 323 | font-size: 18px; 324 | font-weight: normal; 325 | line-height: 20px; 326 | text-align: center; 327 | } 328 | 329 | .slick-play-icon:before { 330 | content: $slick-play-character; 331 | width: 20px; 332 | height: 20px; 333 | font-family: $slick-font-family; 334 | font-size: 18px; 335 | font-weight: normal; 336 | line-height: 20px; 337 | text-align: center; 338 | } 339 | } -------------------------------------------------------------------------------- /docs/style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --alternative-color--light: #e3f2df; 3 | --alternative-color--dark: #2c5e39; 4 | --focus-outline-color: orange; 5 | } 6 | 7 | * { 8 | box-sizing: border-box; 9 | } 10 | 11 | body, 12 | html { 13 | background: #fff; 14 | font-family: Arial, Helvetica, sans-serif; 15 | margin: 0; 16 | padding: 0; 17 | text-rendering: optimizeLegibility; 18 | width: 100%; 19 | } 20 | 21 | body { 22 | padding-bottom: 50px !important; 23 | } 24 | 25 | main:focus, 26 | section:focus { 27 | outline: none; 28 | } 29 | 30 | 31 | /******************* 32 | Content blocks 33 | ********************/ 34 | .content { 35 | margin: auto; 36 | padding: 20px; 37 | width: 600px; 38 | } 39 | 40 | .content:after, 41 | .buttons::after { 42 | clear: both; 43 | content: ''; 44 | display: table; 45 | } 46 | 47 | p { 48 | font-size: 16px; 49 | line-height: 1.5; 50 | margin-bottom: 40px; 51 | text-align: center; 52 | } 53 | 54 | p a:focus { 55 | outline: 3px dashed black; 56 | outline-offset: 5px; 57 | } 58 | 59 | 60 | /*************** 61 | Buttons 62 | ****************/ 63 | .button { 64 | background: var(--alternative-color--dark); 65 | color: #fff; 66 | display: block; 67 | font-size: 16px; 68 | margin: 20px auto; 69 | padding: 20px; 70 | text-align: center; 71 | text-decoration: none; 72 | width: 48%; 73 | border: 1px solid var(--alternative-color--light); 74 | } 75 | 76 | .button:hover, 77 | .button:focus { 78 | background-color: var(--alternative-color--light); 79 | color: var(--alternative-color--dark); 80 | border: 1px solid var(--alternative-color--dark); 81 | text-decoration: underline; 82 | } 83 | 84 | .button:focus { 85 | outline: 4px dashed black; 86 | outline-offset: 2px; 87 | } 88 | 89 | .buttons { 90 | padding: 0 20px 20px; 91 | margin-bottom: 10px; 92 | } 93 | 94 | .buttons .button { 95 | float: left; 96 | margin: 5px; 97 | } 98 | 99 | .filter .button { 100 | margin-bottom: 40px; 101 | } 102 | 103 | 104 | /********************** 105 | Header (desktop) 106 | **********************/ 107 | .header { 108 | padding: 20px 0; 109 | } 110 | 111 | .subheading { 112 | font-style: italic; 113 | font-weight: 400; 114 | text-align: center; 115 | } 116 | 117 | 118 | /**************************** 119 | Fixed mobile header nav 120 | *****************************/ 121 | .fixed-header { 122 | background: #fff; 123 | box-shadow: 2px 0 5px rgba(0, 0, 0, 0.5); 124 | display: none; 125 | padding: 10px; 126 | position: fixed; 127 | top: 0; 128 | width: 100%; 129 | z-index: 10000; 130 | } 131 | 132 | .fixed-header .header-content { 133 | margin: auto; 134 | width: 600px; 135 | } 136 | 137 | .fixed-header h1.title { 138 | float: left; 139 | font-size: 24px; 140 | margin: 0; 141 | } 142 | 143 | .fixed-header ul.nav { 144 | float: right; 145 | margin: 0; 146 | padding: 5px; 147 | } 148 | 149 | .fixed-header ul.nav li { 150 | margin: 0 0 0 10px; 151 | } 152 | 153 | 154 | /**************************** 155 | Desktop and mobile navs 156 | ****************************/ 157 | ul.nav { 158 | margin-bottom: 0; 159 | padding-left: 0; 160 | text-align: center; 161 | } 162 | 163 | ul.nav li { 164 | display: inline-block; 165 | list-style-type: none; 166 | margin: 0; 167 | } 168 | 169 | ul.nav li a { 170 | font-size: 14px; 171 | text-decoration: none; 172 | padding: 10px 15px; 173 | color: var(--alternative-color--dark); 174 | } 175 | 176 | ul.nav li a:hover, 177 | ul.nav li a:focus { 178 | text-decoration: underline; 179 | } 180 | 181 | ul.nav li a:hover { 182 | background-color: var(--alternative-color--light); 183 | color: black; 184 | } 185 | 186 | ul.nav li a:focus { 187 | background-color: black; 188 | color: white; 189 | } 190 | 191 | @media (max-width: 420px) { 192 | ul.nav li a { 193 | display: block; 194 | font-size: 14px; 195 | } 196 | } 197 | 198 | 199 | /******************* 200 | Github icon link 201 | ********************/ 202 | .github-link { 203 | position: absolute; 204 | right: 70px; 205 | top: 40px; 206 | font-size: 80px; 207 | color: var(--alternative-color--dark); 208 | } 209 | 210 | @media screen and (max-width: 1280px) { 211 | .github-link { 212 | position: static; 213 | display: block; 214 | text-align: center; 215 | } 216 | } 217 | 218 | 219 | /********************************* 220 | Light banner at top pointing 221 | to repo README 222 | **********************************/ 223 | .readme-banner { 224 | background-color: var(--alternative-color--light); 225 | color: var(--alternative-color--dark); 226 | margin-top: 10px; 227 | margin-bottom: 0; 228 | padding: 15px; 229 | text-align: center; 230 | } 231 | 232 | .readme-banner a { 233 | color: var(--alternative-color--dark); 234 | font-weight: bold; 235 | transition: outline .08s linear; 236 | } 237 | 238 | 239 | /******************** 240 | Sponsor section 241 | ********************/ 242 | .sponsor-banner { 243 | background-color: var(--alternative-color--light); 244 | color: var(--alternative-color--dark); 245 | font-size: 14px; 246 | font-weight: bold; 247 | text-align: center; 248 | padding: 20px; 249 | margin-bottom: 40px; 250 | } 251 | 252 | .sponsor-banner a { 253 | display: block; 254 | } 255 | 256 | .sponsor-banner a:focus { 257 | outline: 4px dashed black !important; 258 | } 259 | 260 | .sponsor-banner img { 261 | width: 80%; 262 | max-height: 100px; 263 | } 264 | 265 | 266 | /************************************ 267 | Sections with color background 268 | *************************************/ 269 | section { 270 | width: 100%; 271 | position: relative; 272 | color: var(--alternative-color--dark); 273 | } 274 | 275 | section a { 276 | font-weight: bold; 277 | transition: outline .1s linear; 278 | } 279 | 280 | .alt-background { 281 | background: var(--alternative-color--dark); 282 | color: var(--alternative-color--light); 283 | } 284 | 285 | .alt-background h2, 286 | .alt-background h3, 287 | .alt-background h4 { 288 | color: white; 289 | } 290 | 291 | .alt-background a { 292 | color: white; 293 | } 294 | 295 | .alt-background a:focus { 296 | outline-color: orange; 297 | } 298 | 299 | .alt-background .slick-slide { 300 | background: #fff; 301 | margin: 10px; 302 | position: relative; 303 | height: 100px; 304 | color: var(--alternative-color--dark); 305 | 306 | display: flex; 307 | justify-content: center; 308 | align-items: center; 309 | } 310 | .alt-background .slick-slide p { 311 | margin: 0; 312 | font-size: 36px; 313 | } 314 | 315 | .alt-background hr { 316 | background: rgb(255,255,255,.3); 317 | } 318 | 319 | 320 | /************** 321 | Headings 322 | **************/ 323 | h1 { 324 | color: var(--alternative-color--dark); 325 | font-family: Pacifico; 326 | font-size: 96px; 327 | font-weight: 400; 328 | line-height: 1.2; 329 | margin: 0 auto 10px; 330 | text-align: center; 331 | } 332 | 333 | h2, h3 { 334 | font-family: Pacifico; 335 | font-size: 36px; 336 | color: var(--alternative-color--dark); 337 | margin: 20px auto; 338 | text-align: center; 339 | } 340 | 341 | h4, .h4 { 342 | font-family: Pacifico; 343 | font-size: 28px; 344 | margin: 20px auto; 345 | text-align: center; 346 | } 347 | 348 | hr { 349 | background: var(--alternative-color--dark); 350 | border: 0; 351 | height: 1px; 352 | margin: 40px -20px; 353 | } 354 | 355 | 356 | /***************** 357 | Code snippets 358 | ******************/ 359 | pre { 360 | overflow-x: scroll; 361 | margin: 0 10px !important; 362 | border-radius: 0 !important; 363 | border: 2px solid black; 364 | } 365 | 366 | code { 367 | color: #000; 368 | overflow-x: scroll; 369 | } 370 | 371 | p code, 372 | li code, 373 | th code, 374 | td code { 375 | position: relative; 376 | padding: 2px 7px 4px 7px; 377 | border-radius: 3px; 378 | color: var(--alternative-color--dark); 379 | background-color: var(--alternative-color--light); 380 | } 381 | 382 | .alt-background p code, 383 | .alt-background li code, 384 | .alt-background th code, 385 | .alt-background td code { 386 | color: white; 387 | background-color: rgba(0,0,0,0.5); 388 | } 389 | 390 | 391 | /**************************** 392 | Accessibility tip block 393 | *****************************/ 394 | .accessibility-tip { 395 | background-color: #204CCF; 396 | display: flex; 397 | margin: 20px 10px 0 10px; 398 | outline: 2px solid black; 399 | } 400 | 401 | .accessibility-tip .icon { 402 | flex: 0 0 16%; 403 | padding-top: 10px; 404 | 405 | text-align: center; 406 | font-size: 48px; 407 | 408 | color: white; 409 | } 410 | 411 | .accessibility-tip .content { 412 | text-align: left; 413 | padding: 15px; 414 | padding-left: 0; 415 | padding-right: 25px; 416 | } 417 | 418 | .accessibility-tip .heading { 419 | font-family: Arial, Helvetica, sans-serif; 420 | font-size: 18px; 421 | text-align: left; 422 | margin: 0; 423 | margin-bottom: 10px; 424 | } 425 | 426 | .accessibility-tip p { 427 | text-align: left; 428 | margin: 0; 429 | opacity: .9; 430 | } 431 | 432 | .accessibility-tip p + p { 433 | margin-top: 15px; 434 | } 435 | 436 | .accessibility-tip a:focus { 437 | outline-color: orange; 438 | } 439 | 440 | 441 | /******************* 442 | Features at top 443 | ********************/ 444 | .features-list { 445 | display: block; 446 | list-style-type: none; 447 | margin-top: 30px; 448 | padding: 0; 449 | text-align: center; 450 | } 451 | 452 | .features-list li { 453 | margin: 30px 0; 454 | } 455 | 456 | 457 | /************** 458 | Demos 459 | ***************/ 460 | /** All sliders */ 461 | .slick-autoplay-toggle-button, 462 | .slick-prev .slick-prev-icon, .slick-next .slick-next-icon, 463 | .slick-dots li button .slick-dot-icon, 464 | .slick-dots li.slick-active button .slick-dot-icon { 465 | color: white; 466 | } 467 | 468 | .slick-slider p { 469 | font-weight: bold; 470 | } 471 | 472 | /** Variable width */ 473 | .variable-width .slick-slide p { 474 | background: #fff; 475 | color: var(--alternative-color--dark); 476 | margin: 0; 477 | } 478 | 479 | .adaptive-height .slick-slide, 480 | .lazy .slick-slide, 481 | .fade .slick-slide { 482 | height: auto; 483 | min-height: 100px; 484 | } 485 | 486 | /** Center Mode */ 487 | .center .slick-center { 488 | color: royalblue; 489 | opacity: 1; 490 | transform: scale(1.2); 491 | transition: all .5s linear; 492 | } 493 | 494 | /** Adaptive Height */ 495 | .adaptive-height p + p { 496 | font-size: 18px !important; 497 | font-weight: normal; 498 | line-height: 24px; 499 | margin-bottom: 20px !important; 500 | } 501 | 502 | /** Image sliders (Lazy Loading and Fade) */ 503 | .image-slider .image { 504 | padding: 10px; 505 | } 506 | 507 | .image-slider .slick-slide img { 508 | border: 5px solid #fff; 509 | display: block; 510 | width: 100%; 511 | } 512 | 513 | .image-slider .slick-slide img.slick-loading { 514 | border: 0; 515 | } 516 | 517 | 518 | /************ 519 | Tables 520 | ************/ 521 | table { 522 | font-size: 14px; 523 | line-height: 18px; 524 | margin: 40px auto 0; 525 | display: block; 526 | } 527 | 528 | tr { 529 | width: 100%; 530 | border-right: none; 531 | border-bottom: 1px solid #fff; 532 | margin: 0px 0px 20px; 533 | padding: 0px 0px 20px; 534 | background: transparent; 535 | float: left; 536 | } 537 | 538 | tr:last-of-type { 539 | border: 0; 540 | padding-bottom: 0; 541 | } 542 | 543 | th { 544 | font-weight: bold; 545 | font-size: 20px; 546 | color: white; 547 | line-height: 22px; 548 | } 549 | 550 | td { 551 | border: 0; 552 | padding: 10px 0px; 553 | } 554 | 555 | th, 556 | td { 557 | display: block; 558 | width: 100% !important; 559 | text-align: left; 560 | } 561 | 562 | 563 | /************************* 564 | Responsive behaviors 565 | **************************/ 566 | @media (max-width: 768px) { 567 | .fixed-header { 568 | display: none !important; 569 | } 570 | 571 | .header ul.nav li { 572 | display: block; 573 | margin: 20px; 574 | } 575 | 576 | .alt-background h3 { 577 | font-size: 24px; 578 | } 579 | 580 | .button { 581 | margin: 0 auto 20px; 582 | width: auto; 583 | } 584 | 585 | .button.first { 586 | margin-top: 40px; 587 | } 588 | 589 | .buttons { 590 | padding: 0 0 20px; 591 | } 592 | 593 | .buttons .button { 594 | float: left; 595 | font-size: 12px; 596 | margin: 1%; 597 | width: 48%; 598 | } 599 | 600 | .center { 601 | margin-left: -40px; 602 | margin-right: -40px; 603 | } 604 | 605 | .center .slick-center h3 { 606 | color: #e67e22; 607 | opacity: 1; 608 | transform: scale(1); 609 | } 610 | 611 | .center h3 { 612 | opacity: 0.8; 613 | transform: scale(0.95); 614 | transition: all 300ms ease; 615 | } 616 | 617 | .content { 618 | margin: auto; 619 | padding: 20px 40px; 620 | width: auto; 621 | } 622 | 623 | .fixed-header .header-content { 624 | width: auto; 625 | } 626 | 627 | table { 628 | font-size: 14px; 629 | line-height: 18px; 630 | margin: 40px auto 20px; 631 | display: block; 632 | float: left; 633 | } 634 | 635 | tr { 636 | width: 100%; 637 | border-right: none; 638 | border-bottom: 1px solid #fff; 639 | margin: 0px 0px 20px; 640 | padding: 0px 0px 20px; 641 | background: transparent; 642 | float: left; 643 | } 644 | 645 | thead { 646 | display: none; 647 | } 648 | 649 | td { 650 | border: 0; 651 | padding: 10px 0px; 652 | } 653 | 654 | td, 655 | tbody { 656 | display: block; 657 | width: 100% !important; 658 | } 659 | 660 | table.settings td:nth-of-type(1), 661 | table.methods td:nth-of-type(1) { 662 | font-weight: 700; 663 | font-size: 16px; 664 | line-height: 18px; 665 | } 666 | 667 | table.settings td:nth-of-type(2):before { 668 | content: 'Type: '; 669 | font-weight: 700; 670 | } 671 | 672 | table.settings td:nth-of-type(3):before { 673 | content: 'Default: '; 674 | font-weight: 700; 675 | } 676 | 677 | table.methods td:nth-of-type(2):before { 678 | content: 'Arguments: '; 679 | font-weight: 700; 680 | } 681 | } 682 | 683 | /******************************************************************* 684 | Improved .sr-only class by ffoodd 685 | https://gist.github.com/ffoodd/000b59f431e3e64e4ce1a24d5bb36034 686 | ********************************************************************/ 687 | .sr-only { 688 | border: 0 !important; 689 | clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */ 690 | -webkit-clip-path: inset(50%) !important; 691 | clip-path: inset(50%) !important; /* 2 */ 692 | height: 1px !important; 693 | margin: -1px !important; 694 | overflow: hidden !important; 695 | padding: 0 !important; 696 | position: absolute !important; 697 | width: 1px !important; 698 | white-space: nowrap !important; /* 3 */ 699 | } 700 | 701 | 702 | /******************************** 703 | "Skip to main content" link 704 | ********************************/ 705 | .skip-link { 706 | position: absolute; 707 | left: 20px; 708 | top: -100px; 709 | z-index: 100; 710 | transition: top .2s ease-out; 711 | 712 | background-color: var(--alternative-color--dark); 713 | font-size: 18px; 714 | font-weight: bold; 715 | color: white; 716 | padding: 20px; 717 | text-decoration: none; 718 | } 719 | 720 | .skip-link:focus { 721 | top: 20px; 722 | outline: 5px dashed var(--focus-outline-color); 723 | outline-offset: 2px; 724 | } 725 | 726 | .skip-link:hover { 727 | text-decoration: underline; 728 | } -------------------------------------------------------------------------------- /README.markdown: -------------------------------------------------------------------------------- 1 | accessible-slick 2 | ---------------- 3 | 4 | _the last (accessible) carousel you'll ever need_ 5 | 6 | A highly accessible, WCAG 2.0 / 2.1 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 implements [accessibility and usability improvements](#what-makes-this-accessible) crafted and tested by native screen reader users, low vision users, and expert accessibility consultants at [Accessible360](https://accessible360.com) based on their experiences helping to make hundreds of carousels accessible for clients around the world. 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://accessible360.github.io/accessible-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 ``: 21 | 22 | ```html 23 | 24 | 25 | 26 | 27 | 28 | 29 | ``` 30 | 31 | Then, before your closing `` tag add: 32 | 33 | ```html 34 | 35 | ``` 36 | 37 | #### Package Managers 38 | 39 | ```sh 40 | npm install @accessible360/accessible-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, we're releasing our take on an accessible Slick Slider implementation as a fork that respects the original functionality and API features as much as possible so you can improve the accessibility of your carousels **right now**! We'll make it available through all the same channels (like NPM and jsDelivr) so upgrading is as easy as changing the URLs in your `` and ` 859 | 860 | 861 | 862 | 1086 | 1087 | 1088 | --------------------------------------------------------------------------------