Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/staskjs/vue-slick

Vue component for Slick-carousel (http://kenwheeler.github.io/slick)
https://github.com/staskjs/vue-slick

Last synced: 2 months ago
JSON representation

Vue component for Slick-carousel (http://kenwheeler.github.io/slick)

Lists

README 

        
# Slick for Vue.js



# ATTENTION!

This package is no longer supported by its main contributor ([@staskjs](https://github.com/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



For support Vue / Nuxt 3 see [here](https://github.com/Efcolipt/vue-slick-ts)



## Installation and usage



See official documentation [here](http://kenwheeler.github.io/slick).



```sh

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.



```javascript

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

        },

        handleLazyLoadError(event, slick, image, imageSource) {

            console.log('handleLazeLoadError', event, slick, image, imageSource);

        },

    },

});

```



```html



  

  

  

  

  



```



If you need, you can import slick styles too:



```js

// MyCarrousel.vue

import 'slick-carousel/slick/slick.css';

```