├── .gitignore ├── slick ├── ajax-loader.gif ├── fonts │ ├── slick.eot │ ├── slick.ttf │ ├── slick.woff │ └── slick.svg ├── config.rb ├── slick.less ├── slick.scss ├── slick.css ├── slick-theme.css ├── slick-theme.less ├── slick-theme.scss ├── slick.min.js └── slick.js ├── Makefile ├── component.json ├── bower.json ├── ISSUE_TEMPLATE.md ├── slick.jquery.json ├── LICENSE ├── package.json ├── CONTRIBUTING.markdown ├── index.html └── README.markdown /.gitignore: -------------------------------------------------------------------------------- 1 | .sass-cache 2 | node_modules -------------------------------------------------------------------------------- /slick/ajax-loader.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polydice/slick/master/slick/ajax-loader.gif -------------------------------------------------------------------------------- /slick/fonts/slick.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polydice/slick/master/slick/fonts/slick.eot -------------------------------------------------------------------------------- /slick/fonts/slick.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polydice/slick/master/slick/fonts/slick.ttf -------------------------------------------------------------------------------- /slick/fonts/slick.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polydice/slick/master/slick/fonts/slick.woff -------------------------------------------------------------------------------- /Makefile: -------------------------------------------------------------------------------- 1 | 2 | build: components slick.js slick.css 3 | @component build --dev 4 | 5 | components: component.json 6 | @component install --dev 7 | 8 | .PHONY: clean 9 | -------------------------------------------------------------------------------- /slick/config.rb: -------------------------------------------------------------------------------- 1 | css_dir = "." 2 | sass_dir = "." 3 | images_dir = "." 4 | fonts_dir = "fonts" 5 | relative_assets = true 6 | 7 | output_style = :compact 8 | line_comments = false 9 | 10 | preferred_syntax = :scss -------------------------------------------------------------------------------- /component.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "slick", 3 | "repo": "kenwheeler/slick", 4 | "description": "the last carousel you'll ever need", 5 | "version": "1.9.0", 6 | "keywords": ["ui", "jquery", "carousel", "responsive", "slider"], 7 | "dependencies": { 8 | "component/jquery": "*" 9 | }, 10 | "development": {}, 11 | "scripts": { 12 | "slick/slick.js": "slick.js" 13 | }, 14 | "styles": { 15 | "slick/slick.css": "slick.css", 16 | "slick/slick-theme.css": "slick-theme.css" 17 | } 18 | } -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "slick-carousel", 3 | "main": [ 4 | "slick/slick.js", 5 | "slick/slick.css", 6 | "slick/slick.less", 7 | "slick/slick.scss" 8 | ], 9 | "homepage": "https://github.com/kenwheeler/slick", 10 | "authors": [ 11 | "Ken Wheeler " 12 | ], 13 | "description": "the last carousel you'll ever need", 14 | "keywords": [ 15 | "responsive", 16 | "carousel", 17 | "jquery" 18 | ], 19 | "license": "MIT", 20 | "ignore": [ 21 | "**/.*", 22 | "node_modules", 23 | "bower_components", 24 | "test", 25 | "tests", 26 | "package.json", 27 | "index.html" 28 | ], 29 | "dependencies": { 30 | "jquery": ">=1.7" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 2 | > short description of the bug / issue, provide more detail below. 3 | 4 | ==================================================================== 5 | 6 | 7 | ###### `[ paste your jsfiddle link here ]` 8 | 9 | use this jsfiddle to reproduce your bug: 10 | http://jsfiddle.net/simeydotme/fmo50w7n/ 11 | we will likely close your issue without it. 12 | 13 | 14 | ==================================================================== 15 | 16 | 17 | #### Steps to reproduce the problem 18 | 19 | 1. ... 20 | 2. ... 21 | 22 | 23 | ==================================================================== 24 | 25 | 26 | #### What is the expected behaviour? 27 | 28 | ... 29 | 30 | 31 | ==================================================================== 32 | 33 | 34 | #### What is observed behaviour? 35 | 36 | ... 37 | 38 | 39 | ==================================================================== 40 | 41 | 42 | #### More Details 43 | 44 | - Which browsers/versions does it happen on? 45 | - Which jQuery/Slick version are you using? 46 | - Did this work before? 47 | 48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /slick.jquery.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "slick", 3 | "title": "slick", 4 | "description": "A jQuery responsive touch carousel", 5 | "keywords": [ 6 | "responsive", 7 | "slider", 8 | "carousel", 9 | "touch", 10 | "mobile" 11 | ], 12 | "version": "1.9.0", 13 | "author": { 14 | "name": "Ken Wheeler", 15 | "url": "http://kenwheeler.github.io" 16 | }, 17 | "maintainers": [{ 18 | "name": "Ken Wheeler", 19 | "email": "dubmediagroup@gmail.com", 20 | "url": "http://www.dubmediagroup.com" 21 | }], 22 | "licenses": [{ 23 | "type": "MIT", 24 | "url": "https://github.com/kenwheeler/slick/blob/master/LICENSE" 25 | }], 26 | "demo": "http://kenwheeler.github.io/slick/", 27 | "bugs": "https://github.com/kenwheeler/slick/issues", 28 | "homepage": "https://github.com/kenwheeler/slick/", 29 | "docs": "https://github.com/kenwheeler/slick/", 30 | "download": "https://github.com/kenwheeler/slick/archive/master.zip", 31 | "dependencies": { 32 | "jquery": ">=1.7" 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "slick-carousel", 3 | "version": "1.9.0", 4 | "description": "the last carousel you'll ever need", 5 | "main": "slick/slick.js", 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/kenwheeler/slick.git" 9 | }, 10 | "keywords": [ 11 | "carousel", 12 | "slick", 13 | "responsive", 14 | "js", 15 | "slider" 16 | ], 17 | "author": "Ken Wheeler ", 18 | "contributors": [ 19 | { 20 | "name": "ken wheeler", 21 | "email": "ken_wheeler@me.com", 22 | "url": "http://kenwheeler.github.io/" 23 | }, 24 | { 25 | "name": "simon goellner", 26 | "email": "simey.me@gmail.com", 27 | "url": "http://simey.me" 28 | }, 29 | { 30 | "name": "ahmad el-alfy", 31 | "email": "ahmadalfy@gmail.com", 32 | "url": "http://www.alfy.me" 33 | }, 34 | { 35 | "name": "leggomuhgreggo", 36 | "email": "gwestneat@gmail.com" 37 | }, 38 | { 39 | "name": "ashley mcknight", 40 | "email": "ash@sharpteef.net" 41 | } 42 | ], 43 | "license": "MIT", 44 | "bugs": { 45 | "url": "https://github.com/kenwheeler/slick/issues" 46 | }, 47 | "peerDependencies": { 48 | "jquery": ">=1.8.0" 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /slick/fonts/slick.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Generated by Fontastic.me 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /slick/slick.less: -------------------------------------------------------------------------------- 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 | cursor: hand; 31 | } 32 | } 33 | .slick-slider .slick-track, 34 | .slick-slider .slick-list { 35 | -webkit-transform: translate3d(0, 0, 0); 36 | -moz-transform: translate3d(0, 0, 0); 37 | -ms-transform: translate3d(0, 0, 0); 38 | -o-transform: translate3d(0, 0, 0); 39 | transform: translate3d(0, 0, 0); 40 | } 41 | 42 | .slick-track { 43 | position: relative; 44 | left: 0; 45 | top: 0; 46 | display: block; 47 | margin-left: auto; 48 | margin-right: auto; 49 | 50 | &:before, 51 | &:after { 52 | content: ""; 53 | display: table; 54 | } 55 | 56 | &:after { 57 | clear: both; 58 | } 59 | 60 | .slick-loading & { 61 | visibility: hidden; 62 | } 63 | } 64 | .slick-slide { 65 | float: left; 66 | height: 100%; 67 | min-height: 1px; 68 | [dir="rtl"] & { 69 | float: right; 70 | } 71 | img { 72 | display: block; 73 | } 74 | &.slick-loading img { 75 | display: none; 76 | } 77 | 78 | display: none; 79 | 80 | &.dragging img { 81 | pointer-events: none; 82 | } 83 | 84 | .slick-initialized & { 85 | display: block; 86 | } 87 | 88 | .slick-loading & { 89 | visibility: hidden; 90 | } 91 | 92 | .slick-vertical & { 93 | display: block; 94 | height: auto; 95 | border: 1px solid transparent; 96 | } 97 | } 98 | .slick-arrow.slick-hidden { 99 | display: none; 100 | } 101 | -------------------------------------------------------------------------------- /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 | cursor: hand; 31 | } 32 | } 33 | .slick-slider .slick-track, 34 | .slick-slider .slick-list { 35 | -webkit-transform: translate3d(0, 0, 0); 36 | -moz-transform: translate3d(0, 0, 0); 37 | -ms-transform: translate3d(0, 0, 0); 38 | -o-transform: translate3d(0, 0, 0); 39 | transform: translate3d(0, 0, 0); 40 | } 41 | 42 | .slick-track { 43 | position: relative; 44 | left: 0; 45 | top: 0; 46 | display: block; 47 | margin-left: auto; 48 | margin-right: auto; 49 | 50 | &:before, 51 | &:after { 52 | content: ""; 53 | display: table; 54 | } 55 | 56 | &:after { 57 | clear: both; 58 | } 59 | 60 | .slick-loading & { 61 | visibility: hidden; 62 | } 63 | } 64 | .slick-slide { 65 | float: left; 66 | height: 100%; 67 | min-height: 1px; 68 | [dir="rtl"] & { 69 | float: right; 70 | } 71 | img { 72 | display: block; 73 | } 74 | &.slick-loading img { 75 | display: none; 76 | } 77 | 78 | display: none; 79 | 80 | &.dragging img { 81 | pointer-events: none; 82 | } 83 | 84 | .slick-initialized & { 85 | display: block; 86 | } 87 | 88 | .slick-loading & { 89 | visibility: hidden; 90 | } 91 | 92 | .slick-vertical & { 93 | display: block; 94 | height: auto; 95 | border: 1px solid transparent; 96 | } 97 | } 98 | .slick-arrow.slick-hidden { 99 | display: none; 100 | } 101 | -------------------------------------------------------------------------------- /slick/slick.css: -------------------------------------------------------------------------------- 1 | /* Slider */ 2 | .slick-slider 3 | { 4 | position: relative; 5 | 6 | display: block; 7 | box-sizing: border-box; 8 | 9 | -webkit-user-select: none; 10 | -moz-user-select: none; 11 | -ms-user-select: none; 12 | user-select: none; 13 | 14 | -webkit-touch-callout: none; 15 | -khtml-user-select: none; 16 | -ms-touch-action: pan-y; 17 | touch-action: pan-y; 18 | -webkit-tap-highlight-color: transparent; 19 | } 20 | 21 | .slick-list 22 | { 23 | position: relative; 24 | 25 | display: block; 26 | overflow: hidden; 27 | 28 | margin: 0; 29 | padding: 0; 30 | } 31 | .slick-list:focus 32 | { 33 | outline: none; 34 | } 35 | .slick-list.dragging 36 | { 37 | cursor: pointer; 38 | cursor: hand; 39 | } 40 | 41 | .slick-slider .slick-track, 42 | .slick-slider .slick-list 43 | { 44 | -webkit-transform: translate3d(0, 0, 0); 45 | -moz-transform: translate3d(0, 0, 0); 46 | -ms-transform: translate3d(0, 0, 0); 47 | -o-transform: translate3d(0, 0, 0); 48 | transform: translate3d(0, 0, 0); 49 | } 50 | 51 | .slick-track 52 | { 53 | position: relative; 54 | top: 0; 55 | left: 0; 56 | 57 | display: block; 58 | margin-left: auto; 59 | margin-right: auto; 60 | } 61 | .slick-track:before, 62 | .slick-track:after 63 | { 64 | display: table; 65 | 66 | content: ''; 67 | } 68 | .slick-track:after 69 | { 70 | clear: both; 71 | } 72 | .slick-loading .slick-track 73 | { 74 | visibility: hidden; 75 | } 76 | 77 | .slick-slide 78 | { 79 | display: none; 80 | float: left; 81 | 82 | height: 100%; 83 | min-height: 1px; 84 | } 85 | [dir='rtl'] .slick-slide 86 | { 87 | float: right; 88 | } 89 | .slick-slide img 90 | { 91 | display: block; 92 | } 93 | .slick-slide.slick-loading img 94 | { 95 | display: none; 96 | } 97 | .slick-slide.dragging img 98 | { 99 | pointer-events: none; 100 | } 101 | .slick-initialized .slick-slide 102 | { 103 | display: block; 104 | } 105 | .slick-loading .slick-slide 106 | { 107 | visibility: hidden; 108 | } 109 | .slick-vertical .slick-slide 110 | { 111 | display: block; 112 | 113 | height: auto; 114 | 115 | border: 1px solid transparent; 116 | } 117 | .slick-arrow.slick-hidden { 118 | display: none; 119 | } 120 | -------------------------------------------------------------------------------- /CONTRIBUTING.markdown: -------------------------------------------------------------------------------- 1 | ## Submitting issues 2 | 3 | ### Test case required 4 | 5 | **All bug reports and problem issues require a jsFiddle**. 6 | [Please fork this JSFiddle as a baseline](http://jsfiddle.net/simeydotme/fmo50w7n/). 7 | 8 | + A test case clearly demonstrates the bug or issue. 9 | + It contains the bare minimum HTML, CSS, and JavaScript required to demonstrate the bug. 10 | + Assets are not minified (we cannot debug .min.js files). 11 | + A link to your production site is **not** a reduced test case. 12 | 13 | Providing a test case is the best way to get your issue addressed. Without a test case; your issue may be closed. 14 | You must provide a clear and simple way to reproduce the issue with the provided fiddle. 15 | 16 | ## Support 17 | 18 | Although Slick is designed to be super easy to use, there's always things that can go wrong, especially when interacting with other plugins and complicated websites. If you are **having problems getting Slick to work**, or can't figure something out, **this repository**'s issues section **is not the place to ask about it**. 19 | 20 | I have set up a subreddit for Slick discussion at [reddit.com/r/slickcarousel](http://www.reddit.com/r/slickcarousel/). 21 | And a gitter chatroom here: [gitter.im/kenwheeler/slick](https://gitter.im/kenwheeler/slick). 22 | And finally you can ask the world for help, and find out if anyone else has your problem at [stackoverflow](http://stackoverflow.com/search?q=slick+carousel). 23 | 24 | Please use these forums as an area to discuss Slick and any issues you may have. 25 | 26 | ## Feature Requests 27 | 28 | If you would like to request or propose a feature, please do so in the the Slick subreddit or gitter chat: 29 | [reddit.com/r/slickcarousel](http://www.reddit.com/r/slickcarousel/) / [gitter.im/kenwheeler/slick](https://gitter.im/kenwheeler/slick). 30 | 31 | ## Pull requests 32 | 33 | **Contributions are welcome**! That said, please *be prepared to edit* your pull request at request, and provide a jsFiddle of your fork working interoperably with every "mode" that Slick supports, and with varying numbers of slides, slidesToShow & slidesToScroll. Failure to do so will result in your pull request being closed. 34 | 35 | *Please note that while Slick is open source, this is still my baby, and by submitting a pull request you are authorizing me to edit or modify it in any way shape or form. You will be listed in Github as a contributor, but I have and will continue to steer the direction of this project.* 36 | -------------------------------------------------------------------------------- /slick/slick-theme.css: -------------------------------------------------------------------------------- 1 | @charset 'UTF-8'; 2 | /* Slider */ 3 | .slick-loading .slick-list 4 | { 5 | background: #fff url('./ajax-loader.gif') center center no-repeat; 6 | } 7 | 8 | /* Icons */ 9 | @font-face 10 | { 11 | font-family: 'slick'; 12 | font-weight: normal; 13 | font-style: normal; 14 | 15 | src: url('./fonts/slick.eot'); 16 | 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'); 17 | } 18 | /* Arrows */ 19 | .slick-prev, 20 | .slick-next 21 | { 22 | font-size: 0; 23 | line-height: 0; 24 | 25 | position: absolute; 26 | top: 50%; 27 | 28 | display: block; 29 | 30 | width: 20px; 31 | height: 20px; 32 | padding: 0; 33 | -webkit-transform: translate(0, -50%); 34 | -ms-transform: translate(0, -50%); 35 | transform: translate(0, -50%); 36 | 37 | cursor: pointer; 38 | 39 | color: transparent; 40 | border: none; 41 | outline: none; 42 | background: transparent; 43 | } 44 | .slick-prev:hover, 45 | .slick-prev:focus, 46 | .slick-next:hover, 47 | .slick-next:focus 48 | { 49 | color: transparent; 50 | outline: none; 51 | background: transparent; 52 | } 53 | .slick-prev:hover:before, 54 | .slick-prev:focus:before, 55 | .slick-next:hover:before, 56 | .slick-next:focus:before 57 | { 58 | opacity: 1; 59 | } 60 | .slick-prev.slick-disabled:before, 61 | .slick-next.slick-disabled:before 62 | { 63 | opacity: .25; 64 | } 65 | 66 | .slick-prev:before, 67 | .slick-next:before 68 | { 69 | font-family: 'slick'; 70 | font-size: 20px; 71 | line-height: 1; 72 | 73 | opacity: .75; 74 | color: white; 75 | 76 | -webkit-font-smoothing: antialiased; 77 | -moz-osx-font-smoothing: grayscale; 78 | } 79 | 80 | .slick-prev 81 | { 82 | left: -25px; 83 | } 84 | [dir='rtl'] .slick-prev 85 | { 86 | right: -25px; 87 | left: auto; 88 | } 89 | .slick-prev:before 90 | { 91 | content: '←'; 92 | } 93 | [dir='rtl'] .slick-prev:before 94 | { 95 | content: '→'; 96 | } 97 | 98 | .slick-next 99 | { 100 | right: -25px; 101 | } 102 | [dir='rtl'] .slick-next 103 | { 104 | right: auto; 105 | left: -25px; 106 | } 107 | .slick-next:before 108 | { 109 | content: '→'; 110 | } 111 | [dir='rtl'] .slick-next:before 112 | { 113 | content: '←'; 114 | } 115 | 116 | /* Dots */ 117 | .slick-dotted.slick-slider 118 | { 119 | margin-bottom: 30px; 120 | } 121 | 122 | .slick-dots 123 | { 124 | position: absolute; 125 | bottom: -25px; 126 | 127 | display: block; 128 | 129 | width: 100%; 130 | padding: 0; 131 | margin: 0; 132 | 133 | list-style: none; 134 | 135 | text-align: center; 136 | } 137 | .slick-dots li 138 | { 139 | position: relative; 140 | 141 | display: inline-block; 142 | 143 | width: 20px; 144 | height: 20px; 145 | margin: 0 5px; 146 | padding: 0; 147 | 148 | cursor: pointer; 149 | } 150 | .slick-dots li button 151 | { 152 | font-size: 0; 153 | line-height: 0; 154 | 155 | display: block; 156 | 157 | width: 20px; 158 | height: 20px; 159 | padding: 5px; 160 | 161 | cursor: pointer; 162 | 163 | color: transparent; 164 | border: 0; 165 | outline: none; 166 | background: transparent; 167 | } 168 | .slick-dots li button:hover, 169 | .slick-dots li button:focus 170 | { 171 | outline: none; 172 | } 173 | .slick-dots li button:hover:before, 174 | .slick-dots li button:focus:before 175 | { 176 | opacity: 1; 177 | } 178 | .slick-dots li button:before 179 | { 180 | font-family: 'slick'; 181 | font-size: 6px; 182 | line-height: 20px; 183 | 184 | position: absolute; 185 | top: 0; 186 | left: 0; 187 | 188 | width: 20px; 189 | height: 20px; 190 | 191 | content: '•'; 192 | text-align: center; 193 | 194 | opacity: .25; 195 | color: black; 196 | 197 | -webkit-font-smoothing: antialiased; 198 | -moz-osx-font-smoothing: grayscale; 199 | } 200 | .slick-dots li.slick-active button:before 201 | { 202 | opacity: .75; 203 | color: black; 204 | } 205 | -------------------------------------------------------------------------------- /slick/slick-theme.less: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | // Default Variables 4 | 5 | @slick-font-path: "./fonts/"; 6 | @slick-font-family: "slick"; 7 | @slick-loader-path: "./"; 8 | @slick-arrow-color: white; 9 | @slick-dot-color: black; 10 | @slick-dot-color-active: @slick-dot-color; 11 | @slick-prev-character: "←"; 12 | @slick-next-character: "→"; 13 | @slick-dot-character: "•"; 14 | @slick-dot-size: 6px; 15 | @slick-opacity-default: 0.75; 16 | @slick-opacity-on-hover: 1; 17 | @slick-opacity-not-active: 0.25; 18 | 19 | /* Slider */ 20 | .slick-loading .slick-list{ 21 | background: #fff url('@{slick-loader-path}ajax-loader.gif') center center no-repeat; 22 | } 23 | 24 | /* Arrows */ 25 | .slick-prev, 26 | .slick-next { 27 | position: absolute; 28 | display: block; 29 | height: 20px; 30 | width: 20px; 31 | line-height: 0px; 32 | font-size: 0px; 33 | cursor: pointer; 34 | background: transparent; 35 | color: transparent; 36 | top: 50%; 37 | -webkit-transform: translate(0, -50%); 38 | -ms-transform: translate(0, -50%); 39 | transform: translate(0, -50%); 40 | padding: 0; 41 | border: none; 42 | outline: none; 43 | &:hover, &:focus { 44 | outline: none; 45 | background: transparent; 46 | color: transparent; 47 | &:before { 48 | opacity: @slick-opacity-on-hover; 49 | } 50 | } 51 | &.slick-disabled:before { 52 | opacity: @slick-opacity-not-active; 53 | } 54 | } 55 | 56 | .slick-prev:before, .slick-next:before { 57 | font-family: @slick-font-family; 58 | font-size: 20px; 59 | line-height: 1; 60 | color: @slick-arrow-color; 61 | opacity: @slick-opacity-default; 62 | -webkit-font-smoothing: antialiased; 63 | -moz-osx-font-smoothing: grayscale; 64 | 65 | & when ( @slick-font-family = 'slick' ) { 66 | /* Icons */ 67 | @font-face { 68 | font-family: 'slick'; 69 | font-weight: normal; 70 | font-style: normal; 71 | src: url('@{slick-font-path}slick.eot'); 72 | src: url('@{slick-font-path}slick.eot?#iefix') format('embedded-opentype'), url('@{slick-font-path}slick.woff') format('woff'), url('@{slick-font-path}slick.ttf') format('truetype'), url('@{slick-font-path}slick.svg#slick') format('svg'); 73 | } 74 | } 75 | } 76 | 77 | .slick-prev { 78 | left: -25px; 79 | [dir="rtl"] & { 80 | left: auto; 81 | right: -25px; 82 | } 83 | &:before { 84 | content: @slick-prev-character; 85 | [dir="rtl"] & { 86 | content: @slick-next-character; 87 | } 88 | } 89 | } 90 | 91 | .slick-next { 92 | right: -25px; 93 | [dir="rtl"] & { 94 | left: -25px; 95 | right: auto; 96 | } 97 | &:before { 98 | content: @slick-next-character; 99 | [dir="rtl"] & { 100 | content: @slick-prev-character; 101 | } 102 | } 103 | } 104 | 105 | /* Dots */ 106 | 107 | .slick-dotted .slick-slider { 108 | margin-bottom: 30px; 109 | } 110 | 111 | .slick-dots { 112 | position: absolute; 113 | bottom: -25px; 114 | list-style: none; 115 | display: block; 116 | text-align: center; 117 | padding: 0; 118 | margin: 0; 119 | width: 100%; 120 | li { 121 | position: relative; 122 | display: inline-block; 123 | height: 20px; 124 | width: 20px; 125 | margin: 0 5px; 126 | padding: 0; 127 | cursor: pointer; 128 | button { 129 | border: 0; 130 | background: transparent; 131 | display: block; 132 | height: 20px; 133 | width: 20px; 134 | outline: none; 135 | line-height: 0px; 136 | font-size: 0px; 137 | color: transparent; 138 | padding: 5px; 139 | cursor: pointer; 140 | &:hover, &:focus { 141 | outline: none; 142 | &:before { 143 | opacity: @slick-opacity-on-hover; 144 | } 145 | } 146 | &:before { 147 | position: absolute; 148 | top: 0; 149 | left: 0; 150 | content: @slick-dot-character; 151 | width: 20px; 152 | height: 20px; 153 | font-family: @slick-font-family; 154 | font-size: @slick-dot-size; 155 | line-height: 20px; 156 | text-align: center; 157 | color: @slick-dot-color; 158 | opacity: @slick-opacity-not-active; 159 | -webkit-font-smoothing: antialiased; 160 | -moz-osx-font-smoothing: grayscale; 161 | } 162 | } 163 | &.slick-active button:before { 164 | color: @slick-dot-color-active; 165 | opacity: @slick-opacity-default; 166 | } 167 | } 168 | } 169 | -------------------------------------------------------------------------------- /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 | 10 | $slick-font-path: "./fonts/" !default; 11 | $slick-font-family: "slick" !default; 12 | $slick-loader-path: "./" !default; 13 | $slick-arrow-color: white !default; 14 | $slick-dot-color: black !default; 15 | $slick-dot-color-active: $slick-dot-color !default; 16 | $slick-prev-character: "\2190" !default; 17 | $slick-next-character: "\2192" !default; 18 | $slick-dot-character: "\2022" !default; 19 | $slick-dot-size: 6px !default; 20 | $slick-opacity-default: 0.75 !default; 21 | $slick-opacity-on-hover: 1 !default; 22 | $slick-opacity-not-active: 0.25 !default; 23 | 24 | @function slick-image-url($url) { 25 | @if function-exists(image-url) { 26 | @return image-url($url); 27 | } 28 | @else { 29 | @return url($slick-loader-path + $url); 30 | } 31 | } 32 | 33 | @function slick-font-url($url) { 34 | @if function-exists(font-url) { 35 | @return font-url($url); 36 | } 37 | @else { 38 | @return url($slick-font-path + $url); 39 | } 40 | } 41 | 42 | /* Slider */ 43 | 44 | .slick-list { 45 | .slick-loading & { 46 | background: #fff slick-image-url("ajax-loader.gif") center center no-repeat; 47 | } 48 | } 49 | 50 | /* Icons */ 51 | @if $slick-font-family == "slick" { 52 | @font-face { 53 | font-family: "slick"; 54 | src: slick-font-url("slick.eot"); 55 | 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"); 56 | font-weight: normal; 57 | font-style: normal; 58 | } 59 | } 60 | 61 | /* Arrows */ 62 | 63 | .slick-prev, 64 | .slick-next { 65 | position: absolute; 66 | display: block; 67 | height: 20px; 68 | width: 20px; 69 | line-height: 0px; 70 | font-size: 0px; 71 | cursor: pointer; 72 | background: transparent; 73 | color: transparent; 74 | top: 50%; 75 | -webkit-transform: translate(0, -50%); 76 | -ms-transform: translate(0, -50%); 77 | transform: translate(0, -50%); 78 | padding: 0; 79 | border: none; 80 | outline: none; 81 | &:hover, &:focus { 82 | outline: none; 83 | background: transparent; 84 | color: transparent; 85 | &:before { 86 | opacity: $slick-opacity-on-hover; 87 | } 88 | } 89 | &.slick-disabled:before { 90 | opacity: $slick-opacity-not-active; 91 | } 92 | &:before { 93 | font-family: $slick-font-family; 94 | font-size: 20px; 95 | line-height: 1; 96 | color: $slick-arrow-color; 97 | opacity: $slick-opacity-default; 98 | -webkit-font-smoothing: antialiased; 99 | -moz-osx-font-smoothing: grayscale; 100 | } 101 | } 102 | 103 | .slick-prev { 104 | left: -25px; 105 | [dir="rtl"] & { 106 | left: auto; 107 | right: -25px; 108 | } 109 | &:before { 110 | content: $slick-prev-character; 111 | [dir="rtl"] & { 112 | content: $slick-next-character; 113 | } 114 | } 115 | } 116 | 117 | .slick-next { 118 | right: -25px; 119 | [dir="rtl"] & { 120 | left: -25px; 121 | right: auto; 122 | } 123 | &:before { 124 | content: $slick-next-character; 125 | [dir="rtl"] & { 126 | content: $slick-prev-character; 127 | } 128 | } 129 | } 130 | 131 | /* Dots */ 132 | 133 | .slick-dotted.slick-slider { 134 | margin-bottom: 30px; 135 | } 136 | 137 | .slick-dots { 138 | position: absolute; 139 | bottom: -25px; 140 | list-style: none; 141 | display: block; 142 | text-align: center; 143 | padding: 0; 144 | margin: 0; 145 | width: 100%; 146 | li { 147 | position: relative; 148 | display: inline-block; 149 | height: 20px; 150 | width: 20px; 151 | margin: 0 5px; 152 | padding: 0; 153 | cursor: pointer; 154 | button { 155 | border: 0; 156 | background: transparent; 157 | display: block; 158 | height: 20px; 159 | width: 20px; 160 | outline: none; 161 | line-height: 0px; 162 | font-size: 0px; 163 | color: transparent; 164 | padding: 5px; 165 | cursor: pointer; 166 | &:hover, &:focus { 167 | outline: none; 168 | &:before { 169 | opacity: $slick-opacity-on-hover; 170 | } 171 | } 172 | &:before { 173 | position: absolute; 174 | top: 0; 175 | left: 0; 176 | content: $slick-dot-character; 177 | width: 20px; 178 | height: 20px; 179 | font-family: $slick-font-family; 180 | font-size: $slick-dot-size; 181 | line-height: 20px; 182 | text-align: center; 183 | color: $slick-dot-color; 184 | opacity: $slick-opacity-not-active; 185 | -webkit-font-smoothing: antialiased; 186 | -moz-osx-font-smoothing: grayscale; 187 | } 188 | } 189 | &.slick-active button:before { 190 | color: $slick-dot-color-active; 191 | opacity: $slick-opacity-default; 192 | } 193 | } 194 | } 195 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Slick Playground 5 | 6 | 7 | 8 | 50 | 51 | 52 | 53 |
54 |
55 | 56 |
57 |
58 | 59 |
60 |
61 | 62 |
63 |
64 | 65 |
66 |
67 | 68 |
69 |
70 | 71 |
72 |
73 | 74 |
75 |
76 | 77 |
78 |
79 | 80 |
81 |
82 | 83 |
84 |
85 | 86 |
87 |
88 | 89 |
90 |
91 | 92 |
93 |
94 | 95 |
96 |
97 | 98 |
99 |
100 | 101 |
102 |
103 | 104 |
105 |
106 | 107 |
108 |
109 | 110 |
111 |
112 | 113 |
114 |
115 | 116 |
117 |
118 | 119 |
120 |
121 | 122 |
123 |
124 | 125 |
126 |
127 | 128 |
129 |
130 | 131 |
132 |
133 | 134 |
135 |
136 | 137 |
138 |
139 | 140 |
141 |
142 | 143 |
144 |
145 | 146 |
147 |
148 | 149 |
150 |
151 | 152 |
153 |
154 | 155 |
156 |
157 | 158 |
159 |
160 | 161 |
162 |
163 | 164 |
165 |
166 | 167 |
168 |
169 | 170 |
171 |
172 | 173 |
174 |
175 | 176 |
177 |
178 | 179 |
180 |
181 | 182 |
183 |
184 | 185 |
186 |
187 | 188 |
189 |
190 | 191 |
192 |
193 | 194 |
195 |
196 | 197 |
198 |
199 | 200 |
201 |
202 | 203 |
204 |
205 | 206 |
207 |
208 | 209 |
210 |
211 | 212 |
213 |
214 | 215 |
216 |
217 |
218 |
219 | 220 |
221 |
222 | 223 |
224 |
225 | 226 |
227 |
228 | 229 |
230 |
231 | 232 |
233 |
234 | 235 |
236 |
237 | 238 |
239 |
240 | 241 |
242 |
243 | 244 |
245 |
246 | 247 |
248 |
249 | 250 |
251 |
252 | 253 |
254 |
255 | 256 |
257 |
258 | 259 |
260 |
261 | 262 |
263 |
264 | 265 |
266 |
267 | 268 |
269 |
270 | 271 |
272 |
273 | 274 |
275 |
276 | 277 |
278 |
279 | 280 |
281 |
282 | 283 |
284 |
285 | 286 |
287 |
288 | 289 |
290 |
291 | 292 |
293 |
294 | 295 |
296 |
297 | 298 |
299 |
300 | 301 |
302 |
303 | 304 |
305 |
306 | 307 | 308 |
309 |
310 | 311 | 312 | 313 | 371 | 372 | 373 | 374 | -------------------------------------------------------------------------------- /README.markdown: -------------------------------------------------------------------------------- 1 | slick 2 | ------- 3 | 4 | [1]: 5 | 6 | _the last carousel you'll ever need_ 7 | 8 | #### Demo 9 | 10 | [http://kenwheeler.github.io/slick](http://kenwheeler.github.io/slick/) 11 | 12 | #### CDN 13 | 14 | To start working with Slick right away, there's a couple of CDN choices availabile 15 | to serve the files as close, and fast as possible to your users: 16 | 17 | - https://cdnjs.com/libraries/slick-carousel 18 | - https://www.jsdelivr.com/projects/jquery.slick 19 | 20 | ##### Example using jsDelivr 21 | 22 | Just add a link to the css file in your ``: 23 | 24 | ```html 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 | # Bower 41 | bower install --save slick-carousel 42 | 43 | # NPM 44 | npm install slick-carousel 45 | ``` 46 | 47 | #### Contributing 48 | 49 | PLEASE review CONTRIBUTING.markdown prior to requesting a feature, filing a pull request or filing an issue. 50 | 51 | ### Data Attribute Settings 52 | 53 | In slick 1.5 you can now add settings using the data-slick attribute. You still need to call $(element).slick() to initialize slick on the element. 54 | 55 | Example: 56 | 57 | ```html 58 |
59 |

1

60 |

2

61 |

3

62 |

4

63 |

5

64 |

6

65 |
66 | ``` 67 | 68 | ### Settings 69 | 70 | Option | Type | Default | Description 71 | ------ | ---- | ------- | ----------- 72 | accessibility | boolean | true | Enables tabbing and arrow key navigation. Unless `autoplay: true`, sets browser focus to current slide (or first of current slide set, if multiple `slidesToShow`) after slide change. For full a11y compliance enable focusOnChange in addition to this. 73 | adaptiveHeight | boolean | false | Adapts slider height to the current slide 74 | appendArrows | string | $(element) | Change where the navigation arrows are attached (Selector, htmlString, Array, Element, jQuery object) 75 | appendDots | string | $(element) | Change where the navigation dots are attached (Selector, htmlString, Array, Element, jQuery object) 76 | arrows | boolean | true | Enable Next/Prev arrows 77 | asNavFor | string | $(element) | Enables syncing of multiple sliders 78 | autoplay | boolean | false | Enables auto play of slides 79 | autoplaySpeed | int | 3000 | Auto play change interval 80 | centerMode | boolean | false | Enables centered view with partial prev/next slides. Use with odd numbered slidesToShow counts. 81 | centerPadding | string | '50px' | Side padding when in center mode. (px or %) 82 | cssEase | string | 'ease' | CSS3 easing 83 | customPaging | function | n/a | Custom paging templates. See source for use example. 84 | dots | boolean | false | Current slide indicator dots 85 | dotsClass | string | 'slick-dots' | Class for slide indicator dots container 86 | draggable | boolean | true | Enables desktop dragging 87 | easing | string | 'linear' | animate() fallback easing 88 | edgeFriction | integer | 0.15 | Resistance when swiping edges of non-infinite carousels 89 | fade | boolean | false | Enables fade 90 | focusOnSelect | boolean | false | Enable focus on selected element (click) 91 | focusOnChange | boolean | false | Puts focus on slide after change 92 | infinite | boolean | true | Infinite looping 93 | initialSlide | integer | 0 | Slide to start on 94 | lazyLoad | string | 'ondemand' | Accepts 'ondemand' or 'progressive' for lazy load technique. 'ondemand' will load the image as soon as you slide to it, 'progressive' loads one image after the other when the page loads. 95 | mobileFirst | boolean | false | Responsive settings use mobile first calculation 96 | nextArrow | string (html \| jQuery selector) \| object (DOM node \| jQuery object) | `` | Allows you to select a node or customize the HTML for the "Next" arrow. 97 | pauseOnDotsHover | boolean | false | Pauses autoplay when a dot is hovered 98 | pauseOnFocus | boolean | true | Pauses autoplay when slider is focussed 99 | pauseOnHover | boolean | true | Pauses autoplay on hover 100 | prevArrow | string (html \| jQuery selector) \| object (DOM node \| jQuery object) | `` | Allows you to select a node or customize the HTML for the "Previous" arrow. 101 | respondTo | string | 'window' | Width that responsive object responds to. Can be 'window', 'slider' or 'min' (the smaller of the two). 102 | responsive | array | null | Array of objects [containing breakpoints and settings objects (see example)](#responsive-option-example). Enables settings at given `breakpoint`. Set `settings` to "unslick" instead of an object to disable slick at a given breakpoint. 103 | rows | int | 1 | Setting this to more than 1 initializes grid mode. Use slidesPerRow to set how many slides should be in each row. 104 | rtl | boolean | false | Change the slider's direction to become right-to-left 105 | slide | string | '' | Slide element query 106 | slidesPerRow | int | 1 | With grid mode initialized via the rows option, this sets how many slides are in each grid row. 107 | slidesToScroll | int | 1 | # of slides to scroll at a time 108 | slidesToShow | int | 1 | # of slides to show at a time 109 | speed | int | 300 | Transition speed 110 | swipe | boolean | true | Enables touch swipe 111 | swipeToSlide | boolean | false | Swipe to slide irrespective of slidesToScroll 112 | touchMove | boolean | true | Enables slide moving with touch 113 | touchThreshold | int | 5 | To advance slides, the user must swipe a length of (1/touchThreshold) * the width of the slider. 114 | useCSS | boolean | true | Enable/Disable CSS Transitions 115 | useTransform | boolean | true | Enable/Disable CSS Transforms 116 | variableWidth | boolean | false | Disables automatic slide width calculation 117 | vertical | boolean | false | Vertical slide direction 118 | verticalSwiping | boolean | false | Changes swipe direction to vertical 119 | waitForAnimate | boolean | true | Ignores requests to advance the slide while animating 120 | zIndex | number | 1000 | Set the zIndex values for slides, useful for IE9 and lower 121 | 122 | ##### Responsive Option Example 123 | The responsive option, and value, is quite unique and powerful. 124 | You can use it like so: 125 | 126 | ```javascript 127 | $(".slider").slick({ 128 | 129 | // normal options... 130 | infinite: false, 131 | 132 | // the magic 133 | responsive: [{ 134 | 135 | breakpoint: 1024, 136 | settings: { 137 | slidesToShow: 3, 138 | infinite: true 139 | } 140 | 141 | }, { 142 | 143 | breakpoint: 600, 144 | settings: { 145 | slidesToShow: 2, 146 | dots: true 147 | } 148 | 149 | }, { 150 | 151 | breakpoint: 300, 152 | settings: "unslick" // destroys slick 153 | 154 | }] 155 | }); 156 | ``` 157 | 158 | 159 | 160 | 161 | ### Events 162 | 163 | In slick 1.4, callback methods were deprecated and replaced with events. Use them before the initialization of slick as shown below: 164 | 165 | ```javascript 166 | // On swipe event 167 | $('.your-element').on('swipe', function(event, slick, direction){ 168 | console.log(direction); 169 | // left 170 | }); 171 | 172 | // On edge hit 173 | $('.your-element').on('edge', function(event, slick, direction){ 174 | console.log('edge was hit') 175 | }); 176 | 177 | // On before slide change 178 | $('.your-element').on('beforeChange', function(event, slick, currentSlide, nextSlide){ 179 | console.log(nextSlide); 180 | }); 181 | ``` 182 | 183 | Event | Params | Description 184 | ------ | -------- | ----------- 185 | afterChange | event, slick, currentSlide | After slide change callback 186 | beforeChange | event, slick, currentSlide, nextSlide | Before slide change callback 187 | breakpoint | event, slick, breakpoint | Fires after a breakpoint is hit 188 | destroy | event, slick | When slider is destroyed, or unslicked. 189 | edge | event, slick, direction | Fires when an edge is overscrolled in non-infinite mode. 190 | init | event, slick | When Slick initializes for the first time callback. Note that this event should be defined before initializing the slider. 191 | reInit | event, slick | Every time Slick (re-)initializes callback 192 | setPosition | event, slick | Every time Slick recalculates position 193 | swipe | event, slick, direction | Fires after swipe/drag 194 | lazyLoaded | event, slick, image, imageSource | Fires after image loads lazily 195 | lazyLoadError | event, slick, image, imageSource | Fires after image fails to load 196 | 197 | 198 | #### Methods 199 | 200 | Methods are called on slick instances through the slick method itself in version 1.4, see below: 201 | 202 | ```javascript 203 | // Add a slide 204 | $('.your-element').slick('slickAdd',"
"); 205 | 206 | // Get the current slide 207 | var currentSlide = $('.your-element').slick('slickCurrentSlide'); 208 | ``` 209 | 210 | This new syntax allows you to call any internal slick method as well: 211 | 212 | ```javascript 213 | // Manually refresh positioning of slick 214 | $('.your-element').slick('setPosition'); 215 | ``` 216 | 217 | 218 | Method | Argument | Description 219 | ------ | -------- | ----------- 220 | `slick` | options : object | Initializes Slick 221 | `unslick` | | Destroys Slick 222 | `slickNext` | | Triggers next slide 223 | `slickPrev` | | Triggers previous slide 224 | `slickPause` | | Pause Autoplay 225 | `slickPlay` | | Start Autoplay (_will also set `autoplay` option to `true`_) 226 | `slickGoTo` | index : int, dontAnimate : bool | Goes to slide by index, skipping animation if second parameter is set to true 227 | `slickCurrentSlide` | | Returns the current slide index 228 | `slickAdd` | element : html or DOM object, index: int, addBefore: bool | Add a slide. If an index is provided, will add at that index, or before if addBefore is set. If no index is provided, add to the end or to the beginning if addBefore is set. Accepts HTML String || Object 229 | `slickRemove` | index: int, removeBefore: bool | Remove slide by index. If removeBefore is set true, remove slide preceding index, or the first slide if no index is specified. If removeBefore is set to false, remove the slide following index, or the last slide if no index is set. 230 | `slickFilter` | filter : selector or function | Filters slides using jQuery .filter syntax 231 | `slickUnfilter` | | Removes applied filter 232 | `slickGetOption` | option : string(option name) | Gets an option value. 233 | `slickSetOption` | change an option, `refresh` is always `boolean` and will update UI changes... 234 | | `option, value, refresh` | change a [single `option`](https://github.com/kenwheeler/slick#settings) to given `value`; `refresh` is optional. 235 | | `"responsive", [{ breakpoint: n, settings: {} }, ... ], refresh` | change or add [whole sets of responsive options](#responsive-option-example) 236 | | `{ option: value, option: value, ... }, refresh` | change [multiple `option`s](https://github.com/kenwheeler/slick#settings) to corresponding `value`s. 237 | 238 | 239 | #### Example 240 | 241 | Initialize with: 242 | 243 | ```javascript 244 | $(element).slick({ 245 | dots: true, 246 | speed: 500 247 | }); 248 | ``` 249 | 250 | Change the speed with: 251 | 252 | ```javascript 253 | $(element).slick('slickSetOption', 'speed', 5000, true); 254 | ``` 255 | 256 | Destroy with: 257 | 258 | ```javascript 259 | $(element).slick('unslick'); 260 | ``` 261 | 262 | 263 | #### Sass Variables 264 | 265 | Variable | Type | Default | Description 266 | ------ | ---- | ------- | ----------- 267 | $slick-font-path | string | "./fonts/" | Directory path for the slick icon font 268 | $slick-font-family | string | "slick" | Font-family for slick icon font 269 | $slick-loader-path | string | "./" | Directory path for the loader image 270 | $slick-arrow-color | color | white | Color of the left/right arrow icons 271 | $slick-dot-color | color | black | Color of the navigation dots 272 | $slick-dot-color-active | color | $slick-dot-color | Color of the active navigation dot 273 | $slick-prev-character | string | '\2190' | Unicode character code for the previous arrow icon 274 | $slick-next-character | string | '\2192' | Unicode character code for the next arrow icon 275 | $slick-dot-character | string | '\2022' | Unicode character code for the navigation dot icon 276 | $slick-dot-size | pixels | 6px | Size of the navigation dots 277 | 278 | #### Browser support 279 | 280 | Slick works on IE8+ in addition to other modern browsers such as Chrome, Firefox, and Safari. 281 | 282 | #### Dependencies 283 | 284 | jQuery 1.7 285 | 286 | #### License 287 | 288 | Copyright (c) 2017 Ken Wheeler 289 | 290 | Licensed under the MIT license. 291 | 292 | Free as in Bacon. 293 | -------------------------------------------------------------------------------- /slick/slick.min.js: -------------------------------------------------------------------------------- 1 | /* 2 | _ _ _ _ 3 | ___| (_) ___| | __ (_)___ 4 | / __| | |/ __| |/ / | / __| 5 | \__ \ | | (__| < _ | \__ \ 6 | |___/_|_|\___|_|\_(_)/ |___/ 7 | |__/ 8 | 9 | Version: 1.9.0 10 | Author: Ken Wheeler 11 | Website: http://kenwheeler.github.io 12 | Docs: http://kenwheeler.github.io/slick 13 | Repo: http://github.com/kenwheeler/slick 14 | Issues: http://github.com/kenwheeler/slick/issues 15 | 16 | */ 17 | (function(i){"use strict";"function"==typeof define&&define.amd?define(["jquery"],i):"undefined"!=typeof exports?module.exports=i(require("jquery")):i(jQuery)})(function(i){"use strict";var e=window.Slick||{};e=function(){function e(e,o){var s,n=this;n.defaults={accessibility:!0,adaptiveHeight:!1,appendArrows:i(e),appendDots:i(e),arrows:!0,asNavFor:null,prevArrow:'',nextArrow:'',autoplay:!1,autoplaySpeed:3e3,centerMode:!1,centerPadding:"50px",cssEase:"ease",customPaging:function(e,t){return i('', 48 | nextArrow: '', 49 | autoplay: false, 50 | autoplaySpeed: 3000, 51 | centerMode: false, 52 | centerPadding: '50px', 53 | cssEase: 'ease', 54 | customPaging: function(slider, i) { 55 | return $('