🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

A vue.js 2 component used to implement Slick carousel for your web application.

Carousel _Slider

Documentation

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() {             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();             });         },          // 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);         },     }, });
<slick   ref="slick"   :options="slickOptions"   @afterChange="handleAfterChange"   @beforeChange="handleBeforeChange"   @breakpoint="handleBreakpoint"   @destroy="handleDestroy"   @edge="handleEdge"   @init="handleInit"   @reInit="handleReInit"   @setPosition="handleSetPosition"   @swipe="handleSwipe"   @lazyLoaded="handleLazyLoaded"   @lazyLoadError="handleLazeLoadError">   <a href="http://placehold.it/2000x1000"><img src="http://placehold.it/2000x1000" alt=""></a>   <a href="http://placehold.it/2000x1000"><img src="http://placehold.it/2000x1000" alt=""></a>   <a href="http://placehold.it/2000x1000"><img src="http://placehold.it/2000x1000" alt=""></a>   <a href="http://placehold.it/2000x1000"><img src="http://placehold.it/2000x1000" alt=""></a>   <a href="http://placehold.it/2000x1000"><img src="http://placehold.it/2000x1000" alt=""></a> </slick>

If you need, you can import slick styles too:

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

You May Also Like