Slick for Vue.js

ATTENTION!

This package is no longer supported by its main contributor (@staskjs). If you would like to work on it, I will gladly add you as a collaborator. Please reach me on telegram @staskjs.

Vue support

Supports only Vue >= 2

Installation and usage

See official documentation here.

``sh
npm install vue-slick


or


yarn add vue-slick
`

NOTE: slick-carousel official package appears to use jquery as a dependency in package.json,
despite it would be more appropriate to use it as a peer dependency to avoid possibility of using multiple
versions of jquery. Be aware of that. When using webpack you can solve this problem with aliases.

`javascript
import Slick from 'vue-slick';

new Vue({

components: { Slick },

data() {
return {
slickOptions: {
slidesToShow: 3,
// Any other options that can be got from plugin documentation
},
};
},

// All slick methods can be used too, example here
methods: {
next() {
this.$refs.slick.next();
},

prev() {
this.$refs.slick.prev();
},

reInit() {
// Helpful if you have to deal with v-for to update dynamic lists
this.$nextTick(() => {
this.$refs.slick.reSlick();
});
},

// Events listeners
handleAfterChange(event, slick, currentSlide) {
console.log('handleAfterChange', event, slick, currentSlide);
},
handleBeforeChange(event, slick, currentSlide, nextSlide) {
console.log('handleBeforeChange', event, slick, currentSlide, nextSlide);
},
handleBreakpoint(event, slick, breakpoint) {
console.log('handleBreakpoint', event, slick, breakpoint);
},
handleDestroy(event, slick) {
console.log('handleDestroy', event, slick);
},
handleEdge(event, slick, direction) {
console.log('handleEdge', event, slick, direction);
},
handleInit(event, slick) {
console.log('handleInit', event, slick);
},
handleReInit(event, slick) {
console.log('handleReInit', event, slick);
},
handleSetPosition(event, slick) {
console.log('handleSetPosition', event, slick);
},
handleSwipe(event, slick, direction) {
console.log('handleSwipe', event, slick, direction);
},
handleLazyLoaded(event, slick, image, imageSource) {
console.log('handleLazyLoaded', event, slick, image, imageSource);
},
handleLazyLoadError(event, slick, image, imageSource) {
console.log('handleLazeLoadError', event, slick, image, imageSource);
},
},
});
`

`html
ref="slick"
:options="slickOptions"
@afterChange="handleAfterChange"
@beforeChange="handleBeforeChange"
@breakpoint="handleBreakpoint"
@destroy="handleDestroy"
@edge="handleEdge"
@init="handleInit"
@reInit="handleReInit"
@setPosition="handleSetPosition"
@swipe="handleSwipe"
@lazyLoaded="handleLazyLoaded"
@lazyLoadError="handleLazyLoadError">






`

If you need, you can import slick styles too:

`js
// MyCarrousel.vue
import 'slick-carousel/slick/slick.css';
``