Implementing Slick carousel using the Vue Slick component for Vue.js

vue-slick

A carousel of images is a pretty way of showing an array of images, and easy way to scroll through images. For Vue.js projects, one solution can be the Vue Slick component, a wrapper for the Slick-carousel, the last carousel you'll ever need.

You can see the official slick-carousel documentation here along with demos.

NOTE: slick-carousel official package appears to use jquery as a dependency in the package.json, despite it, would be more appropriate to use it as a peer dependency to avoid a possibility of using multiple versions of jquery. Be aware of that., When using webpack you can solve this problem with aliases & supports only Vue >= 2.

Example

Installation via yarn

yarn add vue-slick

Import it in your Vue project as a component

import Slick from 'vue-slick';

new Vue({
    components: { Slick },
    data() {
            return {
                    slickOptions: {
                        //options can be used from the plugin documentation
                        slidesToShow: 4,
                        infinite: true,
                        accessibility: true,
                        adaptiveHeight: false,
                        arrows: true,
                        dots: true,
                        draggable: true,
                        edgeFriction: 0.30,
                        swipe: true
                    }
            }
    },
    // All slick methods can be used too, example here
    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.$refs.slick.reSlick()
            }
    }
})

The options which can be used with the vue-slick are the same with the those used to the original slick carousel available here. Then in your templates, you can bind the slickOptions declared in the data function and use them in your component

<slick ref="slick" :options="slickOptions">
  <a href="http://placehold.it/320x120">
        <img src="http://placehold.it/320x120" alt="">
    </a>
    ...
  <a href="http://placehold.it/420x220">
        <img src="http://placehold.it/420x220" alt="">
    </a>
</slick>

The image will also contain a link which you can set to your preferred destination.

Sliding through the place holder images

The Vue component wrapper for the Slick-carousel is available on GitHub.