Vue component for Slick-carousel (

Downloads in past


61141.2.02 years ago7 years agoMinified + gzip package size for vue-slick in KB


Slick for Vue.js
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.
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.
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);
        handleLazyLoadError(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:
// MyCarrousel.vue
import 'slick-carousel/slick/slick.css';