Vue component for Slick-carousel

Vue component for Slick-carousel

Vue component for Slick-carousel.

Slick for Vue.js

Vue support

Supports only Vue >= 2

Installation and usage

See official documentation here.

$ npm install 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.

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() {

        prev() {

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

        // 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);
        handleLazeLoadError(event, slick, image, imageSource) {
            console.log('handleLazeLoadError', event, slick, image, imageSource);
  <a href=""><img src="" alt=""></a>
  <a href=""><img src="" alt=""></a>
  <a href=""><img src="" alt=""></a>
  <a href=""><img src="" alt=""></a>
  <a href=""><img src="" alt=""></a>

If you need, you can import slick styles too:

import `node_modules/slick-carousel/slick/slick.css`;

Github Repository