@zaubermaerchen/vue3-slick
| Install | |
|---|---|
npm install @zaubermaerchen/vue3-slick |
|
| Latest Version: | 0.2.0 |
| Vue: | 3 |
| License: | MIT |
| Last Updated: | Sep 23, 2026 |
| Links: | GitHub · npm |
Vue3 Slick
slick-carousel component for Vue3
Example
See example project
Parameters
| name | type | required |
|---|---|---|
| options | JQuerySlickOptions | no |
Methods
currentSlide
Returns the current slide index
Returns
number or undefined
goTo
Navigates to a slide by index
Parameters
| name | type | required |
|---|---|---|
| slide | number | yes |
| dontAnimate | boolean | no |
next
Navigates to the next slide
prev
Navigates to the previous slide
pause
Pauses autoplay
play
Starts autoplay
add
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
Parameters
| name | type | required |
|---|---|---|
| html | striong, Object | yes |
| index | number | no |
| addBefore | number | no |
remove
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.
Parameters
| name | type | required |
|---|---|---|
| index | number | yes |
| removeBefore | boolean | no |
filter
Filters slides using jQuery .filter()
Parameters
| name | type | required |
|---|---|---|
| filter | string or (index: number, element: Element) => any | yes |
unfilter
Removes applied filtering
Parameters
| name | type |
|---|---|
| index | number |
getOption
Sets an individual value live. Set refresh to true if it's a UI update.
Parameters
| name | type |
|---|---|
| option | any |
Returns
JQuerySlickOptions or undefined
setOption
Sets an individual value live. Set refresh to true if it's a UI update.
Parameters
| name | type |
|---|---|
| option | string |
| value | JQuerySlickOptions |
| refresh | boolean |
Events
afterChange
After slide change callback
Parameters
| name | type |
|---|---|
| event | JQuery.Event |
| slick | JQuerySlick |
| currentSlide | number |
beforeChange
Before slide change callback
Parameters
| name | type |
|---|---|
| event | JQuery.Event |
| slick | JQuerySlick |
| currentSlide | number |
| nextSlide | number |
breakpoint
Fires after a breakpoint is hit
Parameters
| name | type |
|---|---|
| event | JQuery.Event |
| slick | JQuerySlick |
| breakpoint | number or null |
destroy
When slider is destroyed, or unslicked.
Parameters
| name | type |
|---|---|
| event | JQuery.Event |
| slick | JQuerySlick |
edge
Fires when an edge is overscrolled in non-infinite mode.
Parameters
| name | type |
|---|---|
| event | JQuery.Event |
| slick | JQuerySlick |
| direction | string |
init
When Slick initializes for the first time callback. Note that this event should be defined before initializing the slider.
Parameters
| name | type |
|---|---|
| event | JQuery.Event |
| slick | JQuerySlick |
reInit
Every time Slick (re-)initializes callback
Parameters
| name | type |
|---|---|
| event | JQuery.Event |
| slick | JQuerySlick |
setPosition
Every time Slick recalculates position
Parameters
| name | type |
|---|---|
| event | JQuery.Event |
| slick | JQuerySlick |
swipe
Fires after swipe/drag
Parameters
| name | type |
|---|---|
| event | JQuery.Event |
| slick | JQuerySlick |
| direction | string |
lazyLoaded
Fires after image loads lazily
Parameters
| name | type |
|---|---|
| event | JQuery.Event |
| slick | JQuerySlick |
| image | object |
| imageSource | string |
lazyLoadError
Fires after image fails to load
Parameters
| name | type |
|---|---|
| event | JQuery.Event |
| slick | JQuerySlick |
| image | object |
| imageSource | string |
Related Packages
Vue 3 port of the Slick carousel with full react-slick API parity — Composition...
Version History
| Version | Released | Vue | License |
|---|---|---|---|
| 0.2.0 | ^3.5 | MIT | |
| 0.1.0 | ^3.2 | MIT |