Vue 2 Wrapper for Slick Carousel

1.2.0 · abandoned · verified Sun Apr 19

vue-slick is a component library that provides a Vue 2 wrapper for the popular jQuery-based Slick Carousel. It allows developers to integrate the feature-rich Slick carousel into their Vue 2 applications with a component-based API. The package is currently at version 1.2.0 and has been explicitly declared as no longer actively maintained by its primary contributor, indicating an abandoned status. It differentiates itself by offering a Vue-native syntax for controlling Slick, including prop-based options, method calls via refs, and event listeners. However, its core reliance on `slick-carousel` and `jQuery` introduces complexities, particularly concerning dependency management and potential version conflicts, which are highlighted in its documentation. Its support is strictly limited to Vue 2 environments.

Common errors

```
jQuery is not defined
```
cause The underlying slick-carousel library requires jQuery to be available globally, but it has not been loaded or correctly exposed in the application environment.

fix Install jQuery (`npm install jquery`) and ensure it's imported or globally exposed before slick-carousel and vue-slick are initialized. For webpack, you might need to use `new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' })`.
```
TypeError: this.$refs.slick.next is not a function
```
cause The Slick carousel instance or its methods are not available on the component's ref, often due to the carousel not being fully initialized or an incorrect ref name.

fix Verify that the `Slick` component has `ref="slick"` and that `slick-carousel` and `jquery` are correctly loaded and initialized. Ensure you are calling methods within `this.$nextTick` if dealing with dynamic content changes that might cause re-initialization.

Warnings

breaking The vue-slick package is explicitly no longer supported by its main contributor. This means no new features, bug fixes, or compatibility updates for future Vue or slick-carousel versions are expected. Users should consider migrating to actively maintained alternatives.
Fix: Migrate to a different, actively maintained Vue carousel library, ideally one without jQuery dependencies, or be prepared to fork and maintain vue-slick yourself.
breaking vue-slick is only compatible with Vue >= 2. It does not support Vue 3 or later versions due to breaking changes in Vue's API and component lifecycle.
Fix: Ensure your project uses Vue 2.x. If migrating to Vue 3, you must use a different carousel library designed for Vue 3.
gotcha The underlying `slick-carousel` library, and by extension `vue-slick`, depends on jQuery. This can lead to issues with bundle size, potential conflicts if multiple jQuery versions are loaded, or difficulty integrating into projects that aim to avoid jQuery entirely.
Fix: Ensure jQuery is correctly installed and exposed globally or via webpack aliases. If using webpack, consider aliases to prevent multiple jQuery instances. For example, `resolve: { alias: { 'jquery': 'jquery/src/jquery' } }`.

Install

npm install vue-slick npm
yarn add vue-slick yarn
pnpm add vue-slick pnpm

Imports

Slick
wrong:
```
const Slick = require('vue-slick');
```
correct:
```
import Slick from 'vue-slick';
```
The primary component for integrating Slick Carousel. Designed for Vue 2 applications.
Slick CSS
wrong:
```
import 'vue-slick/dist/slick.css';
```
correct:
```
import 'slick-carousel/slick/slick.css';
```
Requires importing the official slick-carousel styles directly, not from the vue-slick package itself.

Quickstart

This quickstart demonstrates how to import, register, and use the `Slick` component in a Vue 2 application. It shows how to pass options via props, control the carousel programmatically using methods accessed via refs, and listen to events.

import Vue from 'vue';
import Slick from 'vue-slick';
import 'slick-carousel/slick/slick.css';

new Vue({
    el: '#app',
    components: { Slick },

    data() {
        return {
            slickOptions: {
                slidesToShow: 3,
                dots: true,
                infinite: true,
                speed: 500,
                // Any other options that can be got from plugin documentation
            },
            slides: [
                'http://placehold.it/2000x1000?text=Slide%201',
                'http://placehold.it/2000x1000?text=Slide%202',
                'http://placehold.it/2000x1000?text=Slide%203',
                'http://placehold.it/2000x1000?text=Slide%204',
                'http://placehold.it/2000x1000?text=Slide%205'
            ]
        };
    },

    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();
            });
        },

        handleAfterChange(event, slick, currentSlide) {
            console.log('After change:', currentSlide);
        }
    },

    template: `
        <div>
            <button @click="prev">Previous</button>
            <button @click="next">Next</button>
            <button @click="reInit">Re-init</button>
            <slick ref="slick" :options="slickOptions" @afterChange="handleAfterChange">
                <a v-for="(src, index) in slides" :key="index" :href="src">
                    <img :src="src" alt="Slide Image" />
                </a>
            </slick>
        </div>
    `
});

view raw JSON →