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.

1npm install vue-slick
2# or
3yarn 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.

1import Slick from 'vue-slick';
2
3new Vue({
4
5    components: { Slick },
6
7    data() {
8        return {
9            slickOptions: {
10                slidesToShow: 3,
11                // Any other options that can be got from plugin documentation
12            },
13        };
14    },
15
16    // All slick methods can be used too, example here
17    methods: {
18        next() {
19            this.$refs.slick.next();
20        },
21
22        prev() {
23            this.$refs.slick.prev();
24        },
25
26        reInit() {
27            // Helpful if you have to deal with v-for to update dynamic lists
28            this.$nextTick(() => {
29                this.$refs.slick.reSlick();
30            });
31        },
32
33        // Events listeners
34        handleAfterChange(event, slick, currentSlide) {
35            console.log('handleAfterChange', event, slick, currentSlide);
36        },
37        handleBeforeChange(event, slick, currentSlide, nextSlide) {
38            console.log('handleBeforeChange', event, slick, currentSlide, nextSlide);
39        },
40        handleBreakpoint(event, slick, breakpoint) {
41            console.log('handleBreakpoint', event, slick, breakpoint);
42        },
43        handleDestroy(event, slick) {
44            console.log('handleDestroy', event, slick);
45        },
46        handleEdge(event, slick, direction) {
47            console.log('handleEdge', event, slick, direction);
48        },
49        handleInit(event, slick) {
50            console.log('handleInit', event, slick);
51        },
52        handleReInit(event, slick) {
53            console.log('handleReInit', event, slick);
54        },
55        handleSetPosition(event, slick) {
56            console.log('handleSetPosition', event, slick);
57        },
58        handleSwipe(event, slick, direction) {
59            console.log('handleSwipe', event, slick, direction);
60        },
61        handleLazyLoaded(event, slick, image, imageSource) {
62            console.log('handleLazyLoaded', event, slick, image, imageSource);
63        },
64        handleLazyLoadError(event, slick, image, imageSource) {
65            console.log('handleLazeLoadError', event, slick, image, imageSource);
66        },
67    },
68});

1<slick
2  ref="slick"
3  :options="slickOptions"
4  @afterChange="handleAfterChange"
5  @beforeChange="handleBeforeChange"
6  @breakpoint="handleBreakpoint"
7  @destroy="handleDestroy"
8  @edge="handleEdge"
9  @init="handleInit"
10  @reInit="handleReInit"
11  @setPosition="handleSetPosition"
12  @swipe="handleSwipe"
13  @lazyLoaded="handleLazyLoaded"
14  @lazyLoadError="handleLazyLoadError">
15  <a href="http://placehold.it/2000x1000"><img src="http://placehold.it/2000x1000" alt=""></a>
16  <a href="http://placehold.it/2000x1000"><img src="http://placehold.it/2000x1000" alt=""></a>
17  <a href="http://placehold.it/2000x1000"><img src="http://placehold.it/2000x1000" alt=""></a>
18  <a href="http://placehold.it/2000x1000"><img src="http://placehold.it/2000x1000" alt=""></a>
19  <a href="http://placehold.it/2000x1000"><img src="http://placehold.it/2000x1000" alt=""></a>
20</slick>

If you need, you can import slick styles too:

1// MyCarrousel.vue
2import 'slick-carousel/slick/slick.css';