├── .gitignore ├── .husky └── commit-msg ├── .npmrc ├── README.md ├── dist ├── slickCarousel.cjs.js ├── slickCarousel.esm.js └── slickCarousel.umd.js ├── package.json ├── rollup.config.js ├── src ├── index.d.ts ├── slickCarousel.vue └── wrapper.js └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .idea/ 3 | -------------------------------------------------------------------------------- /.husky/commit-msg: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | . "$(dirname -- "$0")/_/husky.sh" 3 | 4 | npx --no -- commitlint --edit ${1} 5 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | package-lock=false -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Slick for Vue.js 2 | 3 | # ATTENTION! 4 | This package is no longer supported by its main contributor ([@staskjs](https://github.com/staskjs)). If you would like to work on it, I will gladly add you as a collaborator. Please reach me on telegram @staskjs. 5 | 6 | ## Vue support 7 | 8 | Supports only Vue >= 2 9 | 10 | For support Vue / Nuxt 3 see [here](https://github.com/Efcolipt/vue-slick-ts) 11 | 12 | ## Installation and usage 13 | 14 | See official documentation [here](http://kenwheeler.github.io/slick). 15 | 16 | ```sh 17 | npm install vue-slick 18 | # or 19 | yarn add vue-slick 20 | ``` 21 | 22 | ***NOTE***: `slick-carousel` official package appears to use `jquery` as a dependency in package.json, 23 | despite it would be more appropriate to use it as a peer dependency to avoid possibility of using multiple 24 | versions of jquery. Be aware of that. When using `webpack` you can solve this problem with aliases. 25 | 26 | ```javascript 27 | import Slick from 'vue-slick'; 28 | 29 | new Vue({ 30 | 31 | components: { Slick }, 32 | 33 | data() { 34 | return { 35 | slickOptions: { 36 | slidesToShow: 3, 37 | // Any other options that can be got from plugin documentation 38 | }, 39 | }; 40 | }, 41 | 42 | // All slick methods can be used too, example here 43 | methods: { 44 | next() { 45 | this.$refs.slick.next(); 46 | }, 47 | 48 | prev() { 49 | this.$refs.slick.prev(); 50 | }, 51 | 52 | reInit() { 53 | // Helpful if you have to deal with v-for to update dynamic lists 54 | this.$nextTick(() => { 55 | this.$refs.slick.reSlick(); 56 | }); 57 | }, 58 | 59 | // Events listeners 60 | handleAfterChange(event, slick, currentSlide) { 61 | console.log('handleAfterChange', event, slick, currentSlide); 62 | }, 63 | handleBeforeChange(event, slick, currentSlide, nextSlide) { 64 | console.log('handleBeforeChange', event, slick, currentSlide, nextSlide); 65 | }, 66 | handleBreakpoint(event, slick, breakpoint) { 67 | console.log('handleBreakpoint', event, slick, breakpoint); 68 | }, 69 | handleDestroy(event, slick) { 70 | console.log('handleDestroy', event, slick); 71 | }, 72 | handleEdge(event, slick, direction) { 73 | console.log('handleEdge', event, slick, direction); 74 | }, 75 | handleInit(event, slick) { 76 | console.log('handleInit', event, slick); 77 | }, 78 | handleReInit(event, slick) { 79 | console.log('handleReInit', event, slick); 80 | }, 81 | handleSetPosition(event, slick) { 82 | console.log('handleSetPosition', event, slick); 83 | }, 84 | handleSwipe(event, slick, direction) { 85 | console.log('handleSwipe', event, slick, direction); 86 | }, 87 | handleLazyLoaded(event, slick, image, imageSource) { 88 | console.log('handleLazyLoaded', event, slick, image, imageSource); 89 | }, 90 | handleLazyLoadError(event, slick, image, imageSource) { 91 | console.log('handleLazeLoadError', event, slick, image, imageSource); 92 | }, 93 | }, 94 | }); 95 | ``` 96 | 97 | ```html 98 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | ``` 119 | 120 | If you need, you can import slick styles too: 121 | 122 | ```js 123 | // MyCarrousel.vue 124 | import 'slick-carousel/slick/slick.css'; 125 | ``` 126 | -------------------------------------------------------------------------------- /dist/slickCarousel.cjs.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; } 4 | 5 | var $ = _interopDefault(require('jquery')); 6 | 7 | // 8 | 9 | // Check if the request came from the browser and is not server rendered 10 | if (typeof window !== 'undefined') { 11 | Promise.resolve(require('slick-carousel')); 12 | } 13 | 14 | var script = { 15 | props: { 16 | options: { 17 | type: Object, 18 | default: function() { 19 | return {}; 20 | }, 21 | }, 22 | }, 23 | 24 | mounted: function() { 25 | this.create(); 26 | }, 27 | 28 | destroyed: function() { 29 | $(this.$el).slick('unslick'); 30 | }, 31 | 32 | methods: { 33 | create: function() { 34 | var $slick = $(this.$el); 35 | 36 | $slick.on('afterChange', this.onAfterChange); 37 | $slick.on('beforeChange', this.onBeforeChange); 38 | $slick.on('breakpoint', this.onBreakpoint); 39 | $slick.on('destroy', this.onDestroy); 40 | $slick.on('edge', this.onEdge); 41 | $slick.on('init', this.onInit); 42 | $slick.on('reInit', this.onReInit); 43 | $slick.on('setPosition', this.onSetPosition); 44 | $slick.on('swipe', this.onSwipe); 45 | $slick.on('lazyLoaded', this.onLazyLoaded); 46 | $slick.on('lazyLoadError', this.onLazyLoadError); 47 | 48 | $slick.slick(this.options); 49 | }, 50 | 51 | destroy: function() { 52 | var $slick = $(this.$el); 53 | 54 | $slick.off('afterChange', this.onAfterChange); 55 | $slick.off('beforeChange', this.onBeforeChange); 56 | $slick.off('breakpoint', this.onBreakpoint); 57 | $slick.off('destroy', this.onDestroy); 58 | $slick.off('edge', this.onEdge); 59 | $slick.off('init', this.onInit); 60 | $slick.off('reInit', this.onReInit); 61 | $slick.off('setPosition', this.onSetPosition); 62 | $slick.off('swipe', this.onSwipe); 63 | $slick.off('lazyLoaded', this.onLazyLoaded); 64 | $slick.off('lazyLoadError', this.onLazyLoadError); 65 | $(this.$el).slick('unslick'); 66 | }, 67 | 68 | reSlick: function() { 69 | this.destroy(); 70 | this.create(); 71 | }, 72 | 73 | next: function() { 74 | $(this.$el).slick('slickNext'); 75 | }, 76 | 77 | prev: function() { 78 | $(this.$el).slick('slickPrev'); 79 | }, 80 | 81 | pause: function() { 82 | $(this.$el).slick('slickPause'); 83 | }, 84 | 85 | play: function() { 86 | $(this.$el).slick('slickPlay'); 87 | }, 88 | 89 | goTo: function(index, dontAnimate) { 90 | $(this.$el).slick('slickGoTo', index, dontAnimate); 91 | }, 92 | 93 | currentSlide: function() { 94 | return $(this.$el).slick('slickCurrentSlide'); 95 | }, 96 | 97 | add: function(element, index, addBefore) { 98 | $(this.$el).slick('slickAdd', element, index, addBefore); 99 | }, 100 | 101 | remove: function(index, removeBefore) { 102 | $(this.$el).slick('slickRemove', index, removeBefore); 103 | }, 104 | 105 | filter: function(filterData) { 106 | $(this.$el).slick('slickFilter', filterData); 107 | }, 108 | 109 | unfilter: function() { 110 | $(this.$el).slick('slickUnfilter'); 111 | }, 112 | 113 | getOption: function(option) { 114 | $(this.$el).slick('slickGetOption', option); 115 | }, 116 | 117 | setOption: function(option, value, refresh) { 118 | $(this.$el).slick('slickSetOption', option, value, refresh); 119 | }, 120 | 121 | setPosition: function() { 122 | $(this.$el).slick('setPosition'); 123 | }, 124 | 125 | // Events 126 | onAfterChange: function(event, slick, currentSlide) { 127 | this.$emit('afterChange', event, slick, currentSlide); 128 | }, 129 | 130 | onBeforeChange: function(event, slick, currentSlide, nextSlide) { 131 | this.$emit('beforeChange', event, slick, currentSlide, nextSlide); 132 | }, 133 | 134 | onBreakpoint: function(event, slick, breakpoint) { 135 | this.$emit('breakpoint', event, slick, breakpoint); 136 | }, 137 | 138 | onDestroy: function(event, slick) { 139 | this.$emit('destroy', event, slick); 140 | }, 141 | 142 | onEdge: function(event, slick, direction) { 143 | this.$emit('edge', event, slick, direction); 144 | }, 145 | 146 | onInit: function(event, slick) { 147 | this.$emit('init', event, slick); 148 | }, 149 | 150 | onReInit: function(event, slick) { 151 | this.$emit('reInit', event, slick); 152 | }, 153 | 154 | onSetPosition: function(event, slick) { 155 | this.$emit('setPosition', event, slick); 156 | }, 157 | 158 | onSwipe: function(event, slick, direction) { 159 | this.$emit('swipe', event, slick, direction); 160 | }, 161 | 162 | onLazyLoaded: function(event, slick, image, imageSource) { 163 | this.$emit('lazyLoaded', event, slick, image, imageSource); 164 | }, 165 | 166 | onLazyLoadError: function(event, slick, image, imageSource) { 167 | this.$emit('lazyLoadError', event, slick, image, imageSource); 168 | }, 169 | }, 170 | 171 | }; 172 | 173 | function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier 174 | /* server only */ 175 | , shadowMode, createInjector, createInjectorSSR, createInjectorShadow) { 176 | if (typeof shadowMode !== 'boolean') { 177 | createInjectorSSR = createInjector; 178 | createInjector = shadowMode; 179 | shadowMode = false; 180 | } // Vue.extend constructor export interop. 181 | 182 | 183 | var options = typeof script === 'function' ? script.options : script; // render functions 184 | 185 | if (template && template.render) { 186 | options.render = template.render; 187 | options.staticRenderFns = template.staticRenderFns; 188 | options._compiled = true; // functional template 189 | 190 | if (isFunctionalTemplate) { 191 | options.functional = true; 192 | } 193 | } // scopedId 194 | 195 | 196 | if (scopeId) { 197 | options._scopeId = scopeId; 198 | } 199 | 200 | var hook; 201 | 202 | if (moduleIdentifier) { 203 | // server build 204 | hook = function hook(context) { 205 | // 2.3 injection 206 | context = context || // cached call 207 | this.$vnode && this.$vnode.ssrContext || // stateful 208 | this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext; // functional 209 | // 2.2 with runInNewContext: true 210 | 211 | if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') { 212 | context = __VUE_SSR_CONTEXT__; 213 | } // inject component styles 214 | 215 | 216 | if (style) { 217 | style.call(this, createInjectorSSR(context)); 218 | } // register component module identifier for async chunk inference 219 | 220 | 221 | if (context && context._registeredComponents) { 222 | context._registeredComponents.add(moduleIdentifier); 223 | } 224 | }; // used by ssr in case component is cached and beforeCreate 225 | // never gets called 226 | 227 | 228 | options._ssrRegister = hook; 229 | } else if (style) { 230 | hook = shadowMode ? function () { 231 | style.call(this, createInjectorShadow(this.$root.$options.shadowRoot)); 232 | } : function (context) { 233 | style.call(this, createInjector(context)); 234 | }; 235 | } 236 | 237 | if (hook) { 238 | if (options.functional) { 239 | // register for functional component in vue file 240 | var originalRender = options.render; 241 | 242 | options.render = function renderWithStyleInjection(h, context) { 243 | hook.call(context); 244 | return originalRender(h, context); 245 | }; 246 | } else { 247 | // inject component registration as beforeCreate hook 248 | var existing = options.beforeCreate; 249 | options.beforeCreate = existing ? [].concat(existing, hook) : [hook]; 250 | } 251 | } 252 | 253 | return script; 254 | } 255 | 256 | var normalizeComponent_1 = normalizeComponent; 257 | 258 | /* script */ 259 | var __vue_script__ = script; 260 | 261 | /* template */ 262 | var __vue_render__ = function() { 263 | var _vm = this; 264 | var _h = _vm.$createElement; 265 | var _c = _vm._self._c || _h; 266 | return _c("div", [_vm._t("default")], 2) 267 | }; 268 | var __vue_staticRenderFns__ = []; 269 | __vue_render__._withStripped = true; 270 | 271 | /* style */ 272 | var __vue_inject_styles__ = undefined; 273 | /* scoped */ 274 | var __vue_scope_id__ = undefined; 275 | /* module identifier */ 276 | var __vue_module_identifier__ = undefined; 277 | /* functional template */ 278 | var __vue_is_functional_template__ = false; 279 | /* style inject */ 280 | 281 | /* style inject SSR */ 282 | 283 | 284 | 285 | var Slick = normalizeComponent_1( 286 | { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ }, 287 | __vue_inject_styles__, 288 | __vue_script__, 289 | __vue_scope_id__, 290 | __vue_is_functional_template__, 291 | __vue_module_identifier__, 292 | undefined, 293 | undefined 294 | ); 295 | 296 | var install = function installMyComponent(Vue, opt) { 297 | // Don't install if already installed, or SSR 298 | if (install.installed || Vue.prototype.$isServer) { return } 299 | install.installed = true; 300 | 301 | Vue.component('slick', Slick); 302 | }; 303 | 304 | // Inject install function into component - allows component 305 | // to be registered via Vue.use() as well as Vue.component() 306 | Slick.install = install; 307 | 308 | module.exports = Slick; 309 | -------------------------------------------------------------------------------- /dist/slickCarousel.esm.js: -------------------------------------------------------------------------------- 1 | import $ from 'jquery'; 2 | 3 | // 4 | 5 | // Check if the request came from the browser and is not server rendered 6 | if (typeof window !== 'undefined') { 7 | Promise.resolve(require('slick-carousel')); 8 | } 9 | 10 | var script = { 11 | props: { 12 | options: { 13 | type: Object, 14 | default: function() { 15 | return {}; 16 | }, 17 | }, 18 | }, 19 | 20 | mounted: function() { 21 | this.create(); 22 | }, 23 | 24 | destroyed: function() { 25 | $(this.$el).slick('unslick'); 26 | }, 27 | 28 | methods: { 29 | create: function() { 30 | var $slick = $(this.$el); 31 | 32 | $slick.on('afterChange', this.onAfterChange); 33 | $slick.on('beforeChange', this.onBeforeChange); 34 | $slick.on('breakpoint', this.onBreakpoint); 35 | $slick.on('destroy', this.onDestroy); 36 | $slick.on('edge', this.onEdge); 37 | $slick.on('init', this.onInit); 38 | $slick.on('reInit', this.onReInit); 39 | $slick.on('setPosition', this.onSetPosition); 40 | $slick.on('swipe', this.onSwipe); 41 | $slick.on('lazyLoaded', this.onLazyLoaded); 42 | $slick.on('lazyLoadError', this.onLazyLoadError); 43 | 44 | $slick.slick(this.options); 45 | }, 46 | 47 | destroy: function() { 48 | var $slick = $(this.$el); 49 | 50 | $slick.off('afterChange', this.onAfterChange); 51 | $slick.off('beforeChange', this.onBeforeChange); 52 | $slick.off('breakpoint', this.onBreakpoint); 53 | $slick.off('destroy', this.onDestroy); 54 | $slick.off('edge', this.onEdge); 55 | $slick.off('init', this.onInit); 56 | $slick.off('reInit', this.onReInit); 57 | $slick.off('setPosition', this.onSetPosition); 58 | $slick.off('swipe', this.onSwipe); 59 | $slick.off('lazyLoaded', this.onLazyLoaded); 60 | $slick.off('lazyLoadError', this.onLazyLoadError); 61 | $(this.$el).slick('unslick'); 62 | }, 63 | 64 | reSlick: function() { 65 | this.destroy(); 66 | this.create(); 67 | }, 68 | 69 | next: function() { 70 | $(this.$el).slick('slickNext'); 71 | }, 72 | 73 | prev: function() { 74 | $(this.$el).slick('slickPrev'); 75 | }, 76 | 77 | pause: function() { 78 | $(this.$el).slick('slickPause'); 79 | }, 80 | 81 | play: function() { 82 | $(this.$el).slick('slickPlay'); 83 | }, 84 | 85 | goTo: function(index, dontAnimate) { 86 | $(this.$el).slick('slickGoTo', index, dontAnimate); 87 | }, 88 | 89 | currentSlide: function() { 90 | return $(this.$el).slick('slickCurrentSlide'); 91 | }, 92 | 93 | add: function(element, index, addBefore) { 94 | $(this.$el).slick('slickAdd', element, index, addBefore); 95 | }, 96 | 97 | remove: function(index, removeBefore) { 98 | $(this.$el).slick('slickRemove', index, removeBefore); 99 | }, 100 | 101 | filter: function(filterData) { 102 | $(this.$el).slick('slickFilter', filterData); 103 | }, 104 | 105 | unfilter: function() { 106 | $(this.$el).slick('slickUnfilter'); 107 | }, 108 | 109 | getOption: function(option) { 110 | $(this.$el).slick('slickGetOption', option); 111 | }, 112 | 113 | setOption: function(option, value, refresh) { 114 | $(this.$el).slick('slickSetOption', option, value, refresh); 115 | }, 116 | 117 | setPosition: function() { 118 | $(this.$el).slick('setPosition'); 119 | }, 120 | 121 | // Events 122 | onAfterChange: function(event, slick, currentSlide) { 123 | this.$emit('afterChange', event, slick, currentSlide); 124 | }, 125 | 126 | onBeforeChange: function(event, slick, currentSlide, nextSlide) { 127 | this.$emit('beforeChange', event, slick, currentSlide, nextSlide); 128 | }, 129 | 130 | onBreakpoint: function(event, slick, breakpoint) { 131 | this.$emit('breakpoint', event, slick, breakpoint); 132 | }, 133 | 134 | onDestroy: function(event, slick) { 135 | this.$emit('destroy', event, slick); 136 | }, 137 | 138 | onEdge: function(event, slick, direction) { 139 | this.$emit('edge', event, slick, direction); 140 | }, 141 | 142 | onInit: function(event, slick) { 143 | this.$emit('init', event, slick); 144 | }, 145 | 146 | onReInit: function(event, slick) { 147 | this.$emit('reInit', event, slick); 148 | }, 149 | 150 | onSetPosition: function(event, slick) { 151 | this.$emit('setPosition', event, slick); 152 | }, 153 | 154 | onSwipe: function(event, slick, direction) { 155 | this.$emit('swipe', event, slick, direction); 156 | }, 157 | 158 | onLazyLoaded: function(event, slick, image, imageSource) { 159 | this.$emit('lazyLoaded', event, slick, image, imageSource); 160 | }, 161 | 162 | onLazyLoadError: function(event, slick, image, imageSource) { 163 | this.$emit('lazyLoadError', event, slick, image, imageSource); 164 | }, 165 | }, 166 | 167 | }; 168 | 169 | function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier 170 | /* server only */ 171 | , shadowMode, createInjector, createInjectorSSR, createInjectorShadow) { 172 | if (typeof shadowMode !== 'boolean') { 173 | createInjectorSSR = createInjector; 174 | createInjector = shadowMode; 175 | shadowMode = false; 176 | } // Vue.extend constructor export interop. 177 | 178 | 179 | var options = typeof script === 'function' ? script.options : script; // render functions 180 | 181 | if (template && template.render) { 182 | options.render = template.render; 183 | options.staticRenderFns = template.staticRenderFns; 184 | options._compiled = true; // functional template 185 | 186 | if (isFunctionalTemplate) { 187 | options.functional = true; 188 | } 189 | } // scopedId 190 | 191 | 192 | if (scopeId) { 193 | options._scopeId = scopeId; 194 | } 195 | 196 | var hook; 197 | 198 | if (moduleIdentifier) { 199 | // server build 200 | hook = function hook(context) { 201 | // 2.3 injection 202 | context = context || // cached call 203 | this.$vnode && this.$vnode.ssrContext || // stateful 204 | this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext; // functional 205 | // 2.2 with runInNewContext: true 206 | 207 | if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') { 208 | context = __VUE_SSR_CONTEXT__; 209 | } // inject component styles 210 | 211 | 212 | if (style) { 213 | style.call(this, createInjectorSSR(context)); 214 | } // register component module identifier for async chunk inference 215 | 216 | 217 | if (context && context._registeredComponents) { 218 | context._registeredComponents.add(moduleIdentifier); 219 | } 220 | }; // used by ssr in case component is cached and beforeCreate 221 | // never gets called 222 | 223 | 224 | options._ssrRegister = hook; 225 | } else if (style) { 226 | hook = shadowMode ? function () { 227 | style.call(this, createInjectorShadow(this.$root.$options.shadowRoot)); 228 | } : function (context) { 229 | style.call(this, createInjector(context)); 230 | }; 231 | } 232 | 233 | if (hook) { 234 | if (options.functional) { 235 | // register for functional component in vue file 236 | var originalRender = options.render; 237 | 238 | options.render = function renderWithStyleInjection(h, context) { 239 | hook.call(context); 240 | return originalRender(h, context); 241 | }; 242 | } else { 243 | // inject component registration as beforeCreate hook 244 | var existing = options.beforeCreate; 245 | options.beforeCreate = existing ? [].concat(existing, hook) : [hook]; 246 | } 247 | } 248 | 249 | return script; 250 | } 251 | 252 | var normalizeComponent_1 = normalizeComponent; 253 | 254 | /* script */ 255 | var __vue_script__ = script; 256 | 257 | /* template */ 258 | var __vue_render__ = function() { 259 | var _vm = this; 260 | var _h = _vm.$createElement; 261 | var _c = _vm._self._c || _h; 262 | return _c("div", [_vm._t("default")], 2) 263 | }; 264 | var __vue_staticRenderFns__ = []; 265 | __vue_render__._withStripped = true; 266 | 267 | /* style */ 268 | var __vue_inject_styles__ = undefined; 269 | /* scoped */ 270 | var __vue_scope_id__ = undefined; 271 | /* module identifier */ 272 | var __vue_module_identifier__ = undefined; 273 | /* functional template */ 274 | var __vue_is_functional_template__ = false; 275 | /* style inject */ 276 | 277 | /* style inject SSR */ 278 | 279 | 280 | 281 | var Slick = normalizeComponent_1( 282 | { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ }, 283 | __vue_inject_styles__, 284 | __vue_script__, 285 | __vue_scope_id__, 286 | __vue_is_functional_template__, 287 | __vue_module_identifier__, 288 | undefined, 289 | undefined 290 | ); 291 | 292 | var install = function installMyComponent(Vue, opt) { 293 | // Don't install if already installed, or SSR 294 | if (install.installed || Vue.prototype.$isServer) { return } 295 | install.installed = true; 296 | 297 | Vue.component('slick', Slick); 298 | }; 299 | 300 | // Inject install function into component - allows component 301 | // to be registered via Vue.use() as well as Vue.component() 302 | Slick.install = install; 303 | 304 | export default Slick; 305 | -------------------------------------------------------------------------------- /dist/slickCarousel.umd.js: -------------------------------------------------------------------------------- 1 | (function (global, factory) { 2 | typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('jquery')) : 3 | typeof define === 'function' && define.amd ? define(['jquery'], factory) : 4 | (global.slickCarousel = global.slickCarousel || {}, global.slickCarousel.umd = factory(global.$)); 5 | }(this, (function ($) { 'use strict'; 6 | 7 | $ = $ && $.hasOwnProperty('default') ? $['default'] : $; 8 | 9 | // 10 | 11 | // Check if the request came from the browser and is not server rendered 12 | if (typeof window !== 'undefined') { 13 | Promise.resolve(require('slick-carousel')); 14 | } 15 | 16 | var script = { 17 | props: { 18 | options: { 19 | type: Object, 20 | default: function() { 21 | return {}; 22 | }, 23 | }, 24 | }, 25 | 26 | mounted: function() { 27 | this.create(); 28 | }, 29 | 30 | destroyed: function() { 31 | $(this.$el).slick('unslick'); 32 | }, 33 | 34 | methods: { 35 | create: function() { 36 | var $slick = $(this.$el); 37 | 38 | $slick.on('afterChange', this.onAfterChange); 39 | $slick.on('beforeChange', this.onBeforeChange); 40 | $slick.on('breakpoint', this.onBreakpoint); 41 | $slick.on('destroy', this.onDestroy); 42 | $slick.on('edge', this.onEdge); 43 | $slick.on('init', this.onInit); 44 | $slick.on('reInit', this.onReInit); 45 | $slick.on('setPosition', this.onSetPosition); 46 | $slick.on('swipe', this.onSwipe); 47 | $slick.on('lazyLoaded', this.onLazyLoaded); 48 | $slick.on('lazyLoadError', this.onLazyLoadError); 49 | 50 | $slick.slick(this.options); 51 | }, 52 | 53 | destroy: function() { 54 | var $slick = $(this.$el); 55 | 56 | $slick.off('afterChange', this.onAfterChange); 57 | $slick.off('beforeChange', this.onBeforeChange); 58 | $slick.off('breakpoint', this.onBreakpoint); 59 | $slick.off('destroy', this.onDestroy); 60 | $slick.off('edge', this.onEdge); 61 | $slick.off('init', this.onInit); 62 | $slick.off('reInit', this.onReInit); 63 | $slick.off('setPosition', this.onSetPosition); 64 | $slick.off('swipe', this.onSwipe); 65 | $slick.off('lazyLoaded', this.onLazyLoaded); 66 | $slick.off('lazyLoadError', this.onLazyLoadError); 67 | $(this.$el).slick('unslick'); 68 | }, 69 | 70 | reSlick: function() { 71 | this.destroy(); 72 | this.create(); 73 | }, 74 | 75 | next: function() { 76 | $(this.$el).slick('slickNext'); 77 | }, 78 | 79 | prev: function() { 80 | $(this.$el).slick('slickPrev'); 81 | }, 82 | 83 | pause: function() { 84 | $(this.$el).slick('slickPause'); 85 | }, 86 | 87 | play: function() { 88 | $(this.$el).slick('slickPlay'); 89 | }, 90 | 91 | goTo: function(index, dontAnimate) { 92 | $(this.$el).slick('slickGoTo', index, dontAnimate); 93 | }, 94 | 95 | currentSlide: function() { 96 | return $(this.$el).slick('slickCurrentSlide'); 97 | }, 98 | 99 | add: function(element, index, addBefore) { 100 | $(this.$el).slick('slickAdd', element, index, addBefore); 101 | }, 102 | 103 | remove: function(index, removeBefore) { 104 | $(this.$el).slick('slickRemove', index, removeBefore); 105 | }, 106 | 107 | filter: function(filterData) { 108 | $(this.$el).slick('slickFilter', filterData); 109 | }, 110 | 111 | unfilter: function() { 112 | $(this.$el).slick('slickUnfilter'); 113 | }, 114 | 115 | getOption: function(option) { 116 | $(this.$el).slick('slickGetOption', option); 117 | }, 118 | 119 | setOption: function(option, value, refresh) { 120 | $(this.$el).slick('slickSetOption', option, value, refresh); 121 | }, 122 | 123 | setPosition: function() { 124 | $(this.$el).slick('setPosition'); 125 | }, 126 | 127 | // Events 128 | onAfterChange: function(event, slick, currentSlide) { 129 | this.$emit('afterChange', event, slick, currentSlide); 130 | }, 131 | 132 | onBeforeChange: function(event, slick, currentSlide, nextSlide) { 133 | this.$emit('beforeChange', event, slick, currentSlide, nextSlide); 134 | }, 135 | 136 | onBreakpoint: function(event, slick, breakpoint) { 137 | this.$emit('breakpoint', event, slick, breakpoint); 138 | }, 139 | 140 | onDestroy: function(event, slick) { 141 | this.$emit('destroy', event, slick); 142 | }, 143 | 144 | onEdge: function(event, slick, direction) { 145 | this.$emit('edge', event, slick, direction); 146 | }, 147 | 148 | onInit: function(event, slick) { 149 | this.$emit('init', event, slick); 150 | }, 151 | 152 | onReInit: function(event, slick) { 153 | this.$emit('reInit', event, slick); 154 | }, 155 | 156 | onSetPosition: function(event, slick) { 157 | this.$emit('setPosition', event, slick); 158 | }, 159 | 160 | onSwipe: function(event, slick, direction) { 161 | this.$emit('swipe', event, slick, direction); 162 | }, 163 | 164 | onLazyLoaded: function(event, slick, image, imageSource) { 165 | this.$emit('lazyLoaded', event, slick, image, imageSource); 166 | }, 167 | 168 | onLazyLoadError: function(event, slick, image, imageSource) { 169 | this.$emit('lazyLoadError', event, slick, image, imageSource); 170 | }, 171 | }, 172 | 173 | }; 174 | 175 | function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier 176 | /* server only */ 177 | , shadowMode, createInjector, createInjectorSSR, createInjectorShadow) { 178 | if (typeof shadowMode !== 'boolean') { 179 | createInjectorSSR = createInjector; 180 | createInjector = shadowMode; 181 | shadowMode = false; 182 | } // Vue.extend constructor export interop. 183 | 184 | 185 | var options = typeof script === 'function' ? script.options : script; // render functions 186 | 187 | if (template && template.render) { 188 | options.render = template.render; 189 | options.staticRenderFns = template.staticRenderFns; 190 | options._compiled = true; // functional template 191 | 192 | if (isFunctionalTemplate) { 193 | options.functional = true; 194 | } 195 | } // scopedId 196 | 197 | 198 | if (scopeId) { 199 | options._scopeId = scopeId; 200 | } 201 | 202 | var hook; 203 | 204 | if (moduleIdentifier) { 205 | // server build 206 | hook = function hook(context) { 207 | // 2.3 injection 208 | context = context || // cached call 209 | this.$vnode && this.$vnode.ssrContext || // stateful 210 | this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext; // functional 211 | // 2.2 with runInNewContext: true 212 | 213 | if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') { 214 | context = __VUE_SSR_CONTEXT__; 215 | } // inject component styles 216 | 217 | 218 | if (style) { 219 | style.call(this, createInjectorSSR(context)); 220 | } // register component module identifier for async chunk inference 221 | 222 | 223 | if (context && context._registeredComponents) { 224 | context._registeredComponents.add(moduleIdentifier); 225 | } 226 | }; // used by ssr in case component is cached and beforeCreate 227 | // never gets called 228 | 229 | 230 | options._ssrRegister = hook; 231 | } else if (style) { 232 | hook = shadowMode ? function () { 233 | style.call(this, createInjectorShadow(this.$root.$options.shadowRoot)); 234 | } : function (context) { 235 | style.call(this, createInjector(context)); 236 | }; 237 | } 238 | 239 | if (hook) { 240 | if (options.functional) { 241 | // register for functional component in vue file 242 | var originalRender = options.render; 243 | 244 | options.render = function renderWithStyleInjection(h, context) { 245 | hook.call(context); 246 | return originalRender(h, context); 247 | }; 248 | } else { 249 | // inject component registration as beforeCreate hook 250 | var existing = options.beforeCreate; 251 | options.beforeCreate = existing ? [].concat(existing, hook) : [hook]; 252 | } 253 | } 254 | 255 | return script; 256 | } 257 | 258 | var normalizeComponent_1 = normalizeComponent; 259 | 260 | /* script */ 261 | var __vue_script__ = script; 262 | 263 | /* template */ 264 | var __vue_render__ = function() { 265 | var _vm = this; 266 | var _h = _vm.$createElement; 267 | var _c = _vm._self._c || _h; 268 | return _c("div", [_vm._t("default")], 2) 269 | }; 270 | var __vue_staticRenderFns__ = []; 271 | __vue_render__._withStripped = true; 272 | 273 | /* style */ 274 | var __vue_inject_styles__ = undefined; 275 | /* scoped */ 276 | var __vue_scope_id__ = undefined; 277 | /* module identifier */ 278 | var __vue_module_identifier__ = undefined; 279 | /* functional template */ 280 | var __vue_is_functional_template__ = false; 281 | /* style inject */ 282 | 283 | /* style inject SSR */ 284 | 285 | 286 | 287 | var Slick = normalizeComponent_1( 288 | { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ }, 289 | __vue_inject_styles__, 290 | __vue_script__, 291 | __vue_scope_id__, 292 | __vue_is_functional_template__, 293 | __vue_module_identifier__, 294 | undefined, 295 | undefined 296 | ); 297 | 298 | var install = function installMyComponent(Vue, opt) { 299 | // Don't install if already installed, or SSR 300 | if (install.installed || Vue.prototype.$isServer) { return } 301 | install.installed = true; 302 | 303 | Vue.component('slick', Slick); 304 | }; 305 | 306 | // Inject install function into component - allows component 307 | // to be registered via Vue.use() as well as Vue.component() 308 | Slick.install = install; 309 | 310 | return Slick; 311 | 312 | }))); 313 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-slick", 3 | "version": "1.2.0", 4 | "description": "Vue component for Slick-carousel (http://kenwheeler.github.io/slick)", 5 | "main": "dist/slickCarousel.cjs.js", 6 | "module": "dist/slickCarousel.esm.js", 7 | "source": "src/slickCarousel.vue", 8 | "types": "src/index", 9 | "scripts": { 10 | "build": "npm run build:cjs & npm run build:es & npm run build:umd", 11 | "prepublishOnly": "npm run build", 12 | "build:cjs": "rollup --config rollup.config.js --format cjs -e jquery,slick-carousel --file dist/slickCarousel.cjs.js", 13 | "build:es": "rollup --config rollup.config.js --format es -e jquery,slick-carousel --file dist/slickCarousel.esm.js", 14 | "build:umd": "rollup --config rollup.config.js --format umd -e jquery,slick-carousel --file dist/slickCarousel.umd.js", 15 | "prepare": "husky install" 16 | }, 17 | "repository": { 18 | "type": "git", 19 | "url": "git+https://github.com/staskjs/vue-slick.git" 20 | }, 21 | "keywords": [ 22 | "slick", 23 | "carousel", 24 | "vue" 25 | ], 26 | "author": "Stas Karpov", 27 | "license": "ISC", 28 | "bugs": { 29 | "url": "https://github.com/staskjs/vue-slick/issues" 30 | }, 31 | "homepage": "https://github.com/staskjs/vue-slick#readme", 32 | "peerDependencies": { 33 | "jquery": "*", 34 | "vue": ">=2" 35 | }, 36 | "dependencies": { 37 | "slick-carousel": "^1.8.1" 38 | }, 39 | "devDependencies": { 40 | "@commitlint/cli": "^17.6.5", 41 | "@commitlint/config-conventional": "^17.6.5", 42 | "@release-it/conventional-changelog": "^5.1.1", 43 | "@types/jquery": "^3.5.16", 44 | "husky": "^8.0.3", 45 | "jquery": "*", 46 | "release-it": "^15.10.5", 47 | "rollup": "^3.23.1", 48 | "rollup-plugin-buble": "^0.19.8", 49 | "rollup-plugin-commonjs": "^10.1.0", 50 | "rollup-plugin-node-resolve": "^5.2.0", 51 | "rollup-plugin-vue": "^6.0.0", 52 | "vue-template-compiler": "^2.5.17" 53 | }, 54 | "release-it": { 55 | "git": { 56 | "commitMessage": "chore(release): v${version}" 57 | }, 58 | "github": { 59 | "release": true, 60 | "releaseName": "v${version}" 61 | }, 62 | "plugins": { 63 | "@release-it/conventional-changelog": { 64 | "preset": "angular", 65 | "infile": "CHANGELOG.md", 66 | "header": "# Changelog" 67 | } 68 | } 69 | }, 70 | "commitlint": { 71 | "rules": { 72 | "header-max-length": [ 73 | 2, 74 | "always", 75 | 130 76 | ] 77 | }, 78 | "extends": [ 79 | "@commitlint/config-conventional" 80 | ] 81 | } 82 | } 83 | -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | import buble from 'rollup-plugin-buble' 2 | import common from 'rollup-plugin-commonjs' 3 | import node from 'rollup-plugin-node-resolve' 4 | import vue from 'rollup-plugin-vue' 5 | 6 | export default { 7 | input: 'src/wrapper.js', 8 | output: [ 9 | { 10 | file: 'dist/slickCarousel.umd.js', 11 | format: 'umd', 12 | name: 'slickCarousel.umd', 13 | } 14 | ], 15 | plugins: [common(), node(), vue(), buble()] 16 | } 17 | -------------------------------------------------------------------------------- /src/index.d.ts: -------------------------------------------------------------------------------- 1 | import Vue from "vue"; 2 | 3 | declare class Slick extends Vue { 4 | next(): void; 5 | prev(): void; 6 | play(): void; 7 | pause(): void; 8 | reSlick(): void; 9 | goTo(index: number): void; 10 | } 11 | 12 | export default Slick; 13 | -------------------------------------------------------------------------------- /src/slickCarousel.vue: -------------------------------------------------------------------------------- 1 | 6 | 173 | -------------------------------------------------------------------------------- /src/wrapper.js: -------------------------------------------------------------------------------- 1 | import Slick from './slickCarousel.vue'; 2 | 3 | const install = function installMyComponent(Vue, opt) { 4 | // Don't install if already installed, or SSR 5 | if (install.installed || Vue.prototype.$isServer) return 6 | install.installed = true 7 | 8 | Vue.component('slick', Slick) 9 | } 10 | 11 | // Inject install function into component - allows component 12 | // to be registered via Vue.use() as well as Vue.component() 13 | Slick.install = install 14 | 15 | // To allow use as module (npm/webpack/etc.) export component 16 | export default Slick 17 | --------------------------------------------------------------------------------