Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?


Failed to load latest commit information.
Latest commit message
Commit time

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';