staskjs / vue-slick

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

Slick for Vue.js

ATTENTION!

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

For support Vue / Nuxt 3 see here

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

<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="handleLazyLoadError">
  <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:

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

vue-slick's Issues

slick.reSclick is not re-intializing slick when trying to get data dynamically using v-for

vue-slick is working fine with static content.
But when I am trying to loop through playlists of user.slick is not working.

html part:

<template>
    <slick ref="slickone" :options="slickOptions">
        <div v-for='playlist in user_playlists'>
            <a href="#">
                <img :src="playlist.image">
                <p>Playlist Name</p>
            </a>
        </div>


    </slick>
</template>

script part:

<script>
    import Slick from 'vue-slick';
    import './node_modules/slick-carousel/slick/slick.css';
    import './node_modules/slick-carousel/slick/slick-theme.css';
    export default {
        data() {
            return {
                user_playlists: [],
                slickOptions: {
                    infinite: true,
                    slidesToShow: 5,
                    slidesToScroll: 1,
                    autoplaySpeed: 5e3,
                },
            };
        },
        methods: {
            getUserPlaylists() {
                this.$http.get('api/user_playlists/user-playlists')
                        .then(response => {
                            this.user_playlists = response.body.data;
                            this.$refs.slickone.reSlick();
                        });
            },
            updated() {
                this.reInit();
            },
            reInit() {
                this.$refs.slickone.reSlick();
            },
        },
        components: {
            'slick': Slick,
        },
        watch: {
            profileData() {
                this.getUserPlaylists();
            },
            user_playlists() {
                this.reInit();
            }
        }
    }
</script>

I have checked the documentation and used this.$ref.slickone.reSlick() but still its not working.
Please help me out with this.

How to handle dynamically added slides

    <slick ref="slick" :options="slickOptions">
      <router-link v-for="gender in genders" :key="gender.tid" :to="{ name: 'Category', params: { gender: gender.tid }}" :class="'gender-' + gender.tid">{{ gender.name }}</router-link>
    </slick>

This not works:

this.$refs.slick.reSlick()

Using "vertical: true" in combination with "fade: true" brings visual bug

Yeah, headline says it all.

ie:
slickOptions: {
vertical: true,
verticalSwiping: true,
slidesToShow: 1,
slidesToScroll: 1,
arrows: false
}

works as expected but as soon as i add "fade: true" like so

slickOptions: {
vertical: true,
verticalSwiping: true,
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true
}

... the other slides are somehow invisible.

Just wanted to share that!

Greetings,

Sebastian

slickGoTo method dont work

slick with v-for

When using this it seems to duplicate the contents of course in content a few times

<slick ref="slick"  id="home-courses" :options="slickOptions">

                    <div v-for="course in content" 
                         v-bind:class="{ 'active-course': course.content_acitive, 'current-course':  course.current_course}"
                         class="course" 
                         :style="'background: url('+ course.content_image +')'"
                    >

                        <div class="course-progress">

                            <ul>
                              <li v-for="dot in course.children" >
                                <div class="progress-dot" v-bind:class="{ 'completed-dot': dot.class_completed, 'active-dot': dot.class_current }"></div>
                                <div class="progress-line"></div>
                              </li>
                            </ul>

                        </div>

                        <div class="course-info">
                            <h3>{{ course.content_name }}</h3>
                            <p>{{ course.content_social_description }}</p>
                            <p class="coure-date">{{ course.date }}</p>
                            <p class="course-action">Continue <i class="fa fa-long-arrow-right" aria-hidden="true"></i></p>
                        </div>
                    </div>

                </slick>

error with vuejs 2.4.1

The following error came up on a build.
Everything was working great with vuejs 2.3.4.

error  in ./~/vue-slick/slickCarousel.vue

Module build failed: Error:

Vue packages version mismatch:

- [email protected]
- [email protected]

This may cause things to work incorrectly. Make sure to use the same version for both.
If you are using vue-loader@>=10.0, simply update vue-template-compiler.
If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest.

"cannot find module 'vue-slick'" with TypeScript

Hi,
I wanted to try the plugin, but when I try to import it into my main.ts file, I get the error that the module cannot be found.
I installed it with npm (once with, once without the --save option), made sure it is listed under dependencies in the package.json, but still, it cannot be found...
any idea why?
thanks!

edit: managed to get it to work by adding a index.js to the plugin folder with
exports.Slick = require('./slickCarousel')

How start with v-for

i have this code and slick not run
<div v-for="allpictures in allphotos" class="single"> <p class="bg-blue text-default text-center">{{allpictures.type}}</p> <li><img v-if="allpictures.gallery == ''" :src="'/storage/admin/cwiczenia/user.png'" alt="" class="img-responsive"></li> <ul v-for="picture in allpictures.gallery"> <li><img v-if="picture" :src="'/storage/admin/cwiczenia/'+picture.photo" alt="" class="img-responsive" ></li> </ul> </div>

How I can use appendDots?

I have options
slickOptions1: { dots: true, appendDots: document.getElementById('mainSlider__dots1'), arrows: false, infinite: true, speed: 500, fade: true, cssEase: 'linear' },
But dots there does not appear.

`destroy()` does not work.

I think you miss a $ before el.

destroy() {
   $(this.el).slick('unslick');
      //  ^ miss a $
},

Reference: https://github.com/staskjs/vue-slick/blob/master/slickCarousel.vue#L55

prev next not working

Passing ref nodes to prevArrow and nextArrow options isn't working

Hey there,

I'm trying to assign Slick a couple of nodes for its next/prev buttons since it annoyingly hides its arrows when there aren't enough slides to go past its container.

BTW, if you do know of a good way to always show its built-in arrows regardless of its state, that would be a better solution. I'm going to need to somehow implement the disabled state when it reaches an edge, which Slick also doesn't provide, unfortunately.

The Problem
Passing in the refs to Slick's options simply doesn't work. Clicking the arrows yields no movement, despite having a handful of items in the carousel.

Here's what I've got:

<button type="button" class="slick-prev" ref="prevArrow"></button>
<button type="button" class="slick-next" ref="nextArrow"></button>
<slick ref="slick" :options="slickOptions"></slick>

data() {
  return {
    slickOptions: {
      arrows: false,
      prevArrow: this.$refs.prevArrow,
      nextArrow: this.$refs.nextArrow
    }
  }
}

Any help would be appreciated. Thanks!

The option "draggable: false" doesn't work

I'm trying to set a false draggable option but, it's not working.

the plugin used with v-for is error

created() {
  this.getProvinceList()
  this.reInit()
},
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();
  }
}

did i wrong?

Combination with nuxt.js doesn't work

Test case:

Add slick to your nuxt.js page.
Refresh page.
Slick lib ERROR appears.

Template example:

<template>
  <section class="monoStaff">
    <div class="container container--fluid">
      <div class="row center-xs">
        <div class="col-xs col-sm col-md col-lg">
          <h1>{{data.title}}</h1>
        </div>
      </div>
      <div class="row">
        <slick ref="slick" :options="slickOptions">
          <a href="http://placehold.it/100x50"><img src="http://placehold.it/100x50" alt=""></a>
          <a href="http://placehold.it/100x50"><img src="http://placehold.it/100x50" alt=""></a>
          <a href="http://placehold.it/100x50"><img src="http://placehold.it/100x50" alt=""></a>
          <a href="http://placehold.it/100x50"><img src="http://placehold.it/100x50" alt=""></a>
          <a href="http://placehold.it/100x50"><img src="http://placehold.it/100x50" alt=""></a>
        </slick>

      </div>
      <div class="row center-xs">
        <div class="col-xs col-sm col-md col-lg">
          <h2>{{data.subtitle}}</h2>
        </div>
      </div>
    </div>
  </section>
</template>

Add slick code sample:

import Slick from 'vue-slick'
import '~/node_modules/slick-carousel/slick/slick.css'
...
  components: {
    Slick
  }
...

problems with reSlick

I am using v-for loop to render slides and when I add new slide I run reSlick

this.$refs.slick.reSlick()

it works fine on static content with no v-for, for example this works:

        <slick ref="slick" :options="slickOptions">
            <div class="slide">
                <img src="/uploads/2017/10/5/lamborghini-aventador-zaragoza-wide-1_large.jpg" alt="" class="img-responsive" style="width: 100%;">
            </div>
            <div class="slide">
                <img src="/uploads/2017/10/5/lamborghini-aventador-zaragoza-wide-1_large.jpg" alt="" class="img-responsive" style="width: 100%;">
            </div>
        </slick>

I run reSlick on that and it does not mess up the slides, however if I have a v-for where I can dinamically insert slides then I get a problem

example:

template:

        <slick ref="slick" :options="slickOptions">
            <component v-for="slide in slides"
              v-bind:is="slide.type"
              :uniqueId="slide.uniqueId"
              v-bind="slide.settings"
              v-on:remove="removeBlock(slide.uniqueId)"
              :key="slide.uniqueId">
            </component>
        </slick>

watch:

    watch: {
        slides(val) {
            this.reInit()
        }

As soon as I add second slide manually throught user interface of my app, the html code that is output should be two slides, it should output only slide component template:

<div class="slide">
    {{uniqueId}}
    <img style="width: 100%;" class="img-responsive" src="/uploads/2017/10/5/lamborghini-aventador-zaragoza-wide-1_large.jpg" alt="">
</div>

however after reSlick is run, it "swallows" all html code but of the last slide added. So I can't reinitialize slides after i add new slide, all old slides get removed from html and latest one is inserted.
This does not happen if reSlick is not run after I manually add a slide.

Slide area not visible

`import slick from 'vue-slick';

export default {
name: 'search-listing-component',
components:{searchFilter,slick},
data(){
return {
listingData:[],
slickOptions:{
slidesToShow:2,
horizontal:true,
arrows:true
}
}
},`

MY VIEW CODE. I am using Bootstrap 4.

<div class="col-12 col-lg-5 mt-md-5 pl-3 pr-2"> <div class="row"> <div class="col"> <slick ref="slick" :options="slickOptions"> <img class="img-fluid d-block col-6" src="@/assets/list1.png" /> <img class="img-fluid d-block col-6" src="@/assets/list1.png" /> </slick> </div> </div>

Nothing appears on the page. When I inspect on developer tools, I am able to see the classes concerned with slick

invalid dependency

warning "[email protected]" has incorrect peer dependency "jquery@~1.7.1".

although it doesn't cause any error or issue, it would be nice to resolve this.

reSlick not properly reinitializing component with v-for

I'm trying to use this component to render a list of images which is dependent on a state variable. When the page loads (currentDamage=0, damagePhotos.length=1), everything renders correctly. When I migrate to (currentDamage=1, damagePhotos.length=0), the old image remains displayed. When I then migrate back to (currentDamage=0, damagePhotos.length=1), another copy of the original image is added to #thumbnails for some reason.

Here's a stripped-down version of my component:

<template>
    <div id="thumbnails" class="col-sm-offset-1 col-sm-5">
        <slick ref="slick" :options="slickOptions">
            <div class="image" v-for="(photo, index) in damagePhotos">
                <img class="preview-img" :src="photo.thumbnail">
            </div>
        </slick>
    </div>
</template>

<script>
    import { mapState, mapGetters } from 'vuex';
    import Vue from 'vue';
    import Slick from 'vue-slick';

    export default {
        computed:   {
            ...mapState(['currentDamage']),
            ...mapGetters(['damagePhotos']),
        },
        watch:      {
            currentDamage() {
                Vue.nextTick().then(this.reInit);
            },
        },
        /* I also tried this with the same result
        updated() {
            Vue.nextTick().then(this.reInit);
        },
        */
        components: {Slick},
        data() {
            return {
                slickOptions: {
                    dots:           true,
                    lazyLoad:       'ondemand',
                    slidesToShow:   4,
                    slidesToScroll: 3,
                },
            };
        },
        methods:    {
            reInit() {
                this.$refs.slick.reSlick();`
            },
        },
    };
</script>

I've tried many combinations here, using watch and updated, and adding the nextTick trick which I read in another bug report, but nothing seems to help. Any insight would be greatly appreciated!

Possibly a dupe of #5, but @packytagliaferro closed it without giving any solution.

Edit: I found a workaround, by adding v-if="damagePhotosWithoutFirst.length > 0", but this is not really a solution to the issue.

Funny duplication

Hi, I get a funny error and I can't figure out how to resolve.

Vue file

<template>
  <div class="my__slider">
    <slick ref="slick" :options="slickOptions">
      <div v-for="(slide, index) in slides" class="slick-slide">
        <div class="my__item">{{ slide.text }}</div>
      </div>
    </slick>
  </div>
</template>

Blade file

<placehead-slider :slides="{{ $template->medialibrary }}"></placehead-slider>

and the browser renders like this

<div class="my__slider">
    <div class="slick-initialized slick-slider">
        <div class="slick-list draggable">
            <div class="slick-track" style="opacity: 1; width: 6450px;">
                <div class="slick-slide slick-current slick-active" data-slick-index="0" aria-hidden="false" style="width: 1290px; position: relative; left: 0px; top: 0px; z-index: 2; opacity: 1;">
                <div>
                    <div class="slick-slide" aria-hidden="true" style="width: 100%; display: inline-block;">
                        <div class="my__item">Hello world</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Why appear these double "slick-slide" with a empty class div inside?

Until a couple of months ago it works like this

<div class="my__slider">
    <div class="slick-initialized slick-slider">
        <div class="slick-list draggable">
            <div class="slick-track" style="opacity: 1; width: 6450px;">
                <div class="slick-slide slick-current slick-active" data-slick-index="0" aria-hidden="false" style="width: 1290px; position: relative; left: 0px; top: 0px; z-index: 2; opacity: 1;">
                    <div class="my__item">Hello world</div>
                </div>            
             </div>
        </div>
    </div>
</div>

(Node 8.9.1 - NPM 5.5.1 - Vue 2.5.3 - VueSlick 1.1.12)

Slider stop working when I enable arrows to false

This is how I am returing the data

data() {
        this.News_list = JSON.parse(this.news);
        News_list: JSON.parse(this.news);
        return {
            slickOptions: {
                slidesToShow: 1,
                infinite: true,
                autoplay: true,
                arrows: false,
                autoplaySpeed: 2000,

                // Any other options that can be got from plugin documentation
            },
            
        };
    },
All code working fine untill I added `arrows` to false. And it's also not working when only slide there.

$slick.slick is not a function

hi ! ,I introduced vue-slick in the project, but it was wrong.
Here is my code, I do not know where the problem, you can help me solve it, very grateful！

`<script> import Slick from 'vue-slick';

import slick from '../assets/css/slick.css';

import slickTheme from '../assets/css/slick-theme.css';

export default {
components: {
Slick
},
data() {
return {
slickOptions: {
slidesToShow: 4,
slidesToScroll: 1,
infinite: false,
},
}
},

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

}
</script>`
[Vue warn]: Error in mounted hook: "TypeError: $slick.slick is not a function"
found in
---> at E:\Source\web\node_modules_vue-slick@1.1.6@vue-slick\slickCarousel.vue
at E:\Source\web\src\pages\Detail.vue
at E:\Source\web\src\App.vue

vue.esm.js?65d7:523 TypeError: $slick.slick is not a function
at VueComponent.create (eval at (app.js:1409), :43:14)
at VueComponent.boundFn [as create] (eval at (app.js:723), :166:12)
at VueComponent.mounted (eval at (app.js:1409), :23:10)
at callHook (eval at (app.js:723), :2557:21)
at Object.insert (eval at (app.js:723), :3384:7)
at invokeInsertHook (eval at (app.js:723), :5211:28)
at VueComponent.patch [as patch] (eval at (app.js:723), :5376:5)
at VueComponent.Vue._update (eval at (app.js:723), :2324:19)
at VueComponent.updateComponent (eval at (app.js:723), :2440:10)
at Watcher.get (eval at (app.js:723), :2779:25)

[Vue warn]: Error in mounted hook: "TypeError: $slick.slick is not a function"

After updating to [email protected] this error occurs.
What can I do?

Reslick might not work as intended

I'm having issue using vue-slick with items that was loaded from server. Reslick function doesn't work as intended. I am seeing the div or a href stack up block by block below inside the control.

Unless that, if i'm using workaround like this, then only it would work:

// assign items here:
this.items = items // loaded from ajax or axios call

setTimeout(function () {
  this.reInit()
}.bind(this), 1000)

Is there any better way of doing this?

Carousel unslicks before transition completes because unslick called on beforeDestroy

Thanks for the great component!

I am using it in a page that fades out before the next page fades in using vue's transition component. But when the transition starts, the beforeDestroy callback is called, which for vue-slick calls unslick. This causes the carousel to distort back to the original markup as the transition takes place.

Would it be better to unslick in the destroyed callback after the transition is complete?

Responsive

One question i want it to use the responsive options from Slick

responsive: [ { breakpoint: 1200, settings: { arrows: false, slidesToShow: 4 } }, { breakpoint: 768, settings: { arrows: false, slidesToShow: 3 } }, { breakpoint: 576, settings: { arrows: false, slidesToShow: 2 } } ]

But seems not to work in vue, there is a workaround for this in the component?

Slick Events

I'm attempting to use slick events on your component, but I can't get it to work.

I'm passing in an event listener like @afterChange (this is a Slick event according to its documentation) to the main slick element, but it just gets removed.

Sorry if this is a fault on my side, im new to Vue.js

Calling the component like so: (its PUG templating.)
test is a method I registered.

slick.carousel(:options="slickOptions", @afterChange="test")

if I bind a click event to the children, it works, but not on the parent.

Thanks in advance!

don't work on Safari

Hi, your component is very helpful for me !

But with Safari and webpack you can't have a method name with a parameter with the same name.
you should rename the parameter of method filter please.

filter(filter) {
  $(this.$el).slick('slickFilter', filter);
},

best regards,
Jeremie.

How to add thumbs?

According to slick's official site, there are slide-for and slide-nav.

 $('.slider-for').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
  fade: true,
  asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  asNavFor: '.slider-for',
  dots: true,
  centerMode: true,
  focusOnSelect: true
});

But how to realize it in vue-slick?

How use reInit function

When i use v-for to update dynamic lists, how should i use reInit function to deal with new lists?

Browserify transform

Please, add vueify transform to package.json, to vue-slick work with Browserify. This should be enough:

"browserify": {
  "transform": ["vueify"]
}

Thanks!

Nothing is working

I have an easy example with

\\ a componenet .vue
...
    <slick ref="slick" :options="{slidesToShow: 3, infinite: true,  slidesToShow: 1}">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
      </slick>
...

Where box is

.box {
  height: 150px;
  width: 350px;
  margin-left: 5px;
  background-color: red;
}

With the vue chrome's extension i can see that the options are correctly passed to the slick component but this is the result:

What is going on?

"TypeError: $slick.slick is not a function"

I'm getting this error..and im fairly certain its todo with jquery.
You do mention:
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.

Could you paste the best practices approach here?
Tried aliases and provideplugins but still getting errors.
https://stackoverflow.com/questions/28969861/managing-jquery-plugin-dependency-in-webpack?answertab=active#tab-top

slickAdd

Does the element argument here

    add(element, index, addBefore) {
      $(this.$el).slick('slickAdd', element, index, addBefore);
    },

Need to be html or can it be a vue component

After load dynamics items, reSlick doesn't work

After load dynamics items, and execute the

this.$nextTick(() => {
    this.$refs.slick.reSlick();
});

every element that should by a slide, disappear from the dom
This only happens when use a v-for

<template>
    <div>
        <h3>{{ sliderData.name }}</h3>
        <slick ref="slick" :options="slickOptions">
            <div v-for="item in sliderData.items" class="box">
                {{ item.title }}
            </div>
        </slick>
    </div>
</template>

Before execute the reSlick every item is there, only the slider doesn't work .. but when execute the reSlick every item is gone ...

methods: {
            getCars() {
                axios.get('api/v1/slider/'+this.sliderId, {headers: getHeaders()})
                    .then((response) => {
                        this.sliderData = response.data;
                        this.complete = true;
                        this.reInit();
                    });
            },
            reInit() {
                this.$nextTick(() => {
                    this.$refs.slick.reSlick();
                });
            }
        },

@init error

Using event @init on slick like this

<slick ref="slick" :options="slickOptions" @init="slideWidth">

brings me this error:

Uncaught TypeError: n.apply is not a function

Notice: @BeforeChange @AfterChange .... works perfectly!

Carousel full width shows on page

Hello,

First of all thank you Stanislav for your work, great to see a Vue Slick adaption! I reallyhope I can get it to work.

My issue is that while all interactivity seems to work basically, the containing div with class "slick-track" shows in full width on my page, so it is not hiding any 'hidden' slick elements when sliding. The result is this (page should end where image ends):

The console says

Does anyone have an idea why this is happening?

This is my code for the slides:

and this are my Slick options right now:

slickOptions: { slidesToShow: 3, swipeToSlide: true, arrows: false, infinite: true // Any other options that can be got from plugin documentation }

How to install it with alias?

Can explain?

Styles are not imported

Is it normal ?
What i've missed ?

Transition issue because of destroyed() hook

The slick will be "unslicked" on the destroyed hook. That results into a broken layout if the developer is using page transitions (e.g. on leaving a route). The reason behind this is that the unslick command will remove all slick classes and information from the DOM elements.

See also: vuejs/vue#6983

There should be a way to wait for the transition to finish before unslick happens.

This can be easily reproduced with 2 pages and a very slow page route transition.

<transition name="route-transition-fade" mode="out-in">
    <router-view :key="$route.path"/>
</transition>

.route-transition-fade-enter-active, .route-transition-fade-leave-active {
  transition: opacity 500s ease;
}

.route-transition-fade-enter, .route-transition-fade-leave-to {
  opacity: 0;
}

Can't run Vue-slick

Hi,
After install, I got the issue:

Module not found: Error: Can't resolve 'jquery'

in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./node_modules/vue-slick/slickCarousel.vue Module not found: Error: Can't resolve 'jquery' in 'D:\xxxx\lia-shahar-pwa\node_modules\vue-slick' @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./node_modules/vue-slick/slickCarousel.vue 8:0-23 @ ./node_modules/vue-slick/slickCarousel.vue @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/product-category-list.vue @ ./src/components/product-category-list.vue @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/home.vue @ ./src/components/home.vue @ ./src/router/index.js @ ./src/main.js @ multi ./build/dev-client ./src/main.js

A way to set it globaly

Hi there!
trying to init slick slider with:
Vue.use(Slick)

but it doesn't work.
I would be very thankful for help :)

.vue file in node modules

Hi, I think its pretty common practice to exclude node modules from your vue-loader, which is causing issues trying to import a .vue file from there. Could you possible compile your component down before distributing it so not having to include this path for the vue-loader please?

this.$refs.slick.currentSlide() returns undefined

Hi there. Long story short, there is no way to get index of current slide. currentSlide() always returns undefined. What am I doing wrong?

<template>
    <section class="faq" id="faq">
        <div class="container">
            <div class="avail-list mb-9 mb-lg-12">
                <div class="row justify-content-between align-items-center text-center">
                    <slick ref="slick" class="col-12 hidden-lg-up">
                        <div v-for="item in avails">
                            <div class="avail">
                                <img class="avail__pic"
                                     :src="require('../../assets/images/' + item.icon)"
                                     :alt="item.alt">
                                <p v-html="item.text" class="avail__desc"></p>
                            </div>
                        </div>
                    </slick>
                    <div class="col-12 hidden-lg-up mt-8">
                        <div class="d-flex justify-content-center">
                            <div v-for="(item, index) in avails"
                                 :class="['slider-dot', { 'slider-dot--active' : activeSlide === index }]"
                                 @click="goToSlide(index)"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</template>

<script>
  import Slick from 'vue-slick';

  export default {
    name: 'faq',
    data() {
      return {
        activeSlide: 0,
        avails: [
          {
            text: 'We only work <br> to make an impact',
            icon: 'icon-rocket.svg',
            alt: 'Rocket',
          },
          {
            text: 'Our work <br> is transparent',
            icon: 'icon-partners.svg',
            alt: 'Partners',
          },
          {
            text: 'We think before <br> doing',
            icon: 'icon-figures.svg',
            alt: 'Figures',
          },
          {
            text: 'Professionalism <br> is the key',
            icon: 'icon-result.svg',
            alt: 'Result',
          },
        ],
      };
    },
    components: {
      Slick,
    },
    methods: {
      goToSlide(index) {
        this.activeSlide = index;
        this.$refs.slick.goTo(index);
        return this.$refs.slick.currentSlide(); // returns undefined
      },
    },
  };
</script>

How can I use beforeChange Events

when change slide with click or swipe I will check last slide ? how can I this

{{list.title}} {{list.companyName}}

<button type="button" @click="prev" data-role="none" class="lastsearch-prev-arrow slick-arrow" aria-label="Previous" role="button" style="">


<button type="button" @click="next" data-role="none" class="lastsearch-next-arrow slick-arrow" aria-label="Previous" role="button" style="">

How to remove items in slick correctly

Question description

Hi, thanks for providing this wrapper. Your code is simple and easy to understand.
Slick works fine on my vue project via vue-slick.
However, when I try to remove items in slick, I have encountered difficulties.

Remove cause the following vue's error in some case.

Failed to execute 'insertBefore' on 'Node':The node before which the new node is to be inserted is not a child of this node. (omitted)

For example,

1. "remove index 0 and 2 at once" => fail
2. "remove index 0 and 1 at once" => work

I provide my repo for easier debugging.

Reproduction Link

https://jsfiddle.net/ignoreswing/e4rz3ph7/
Vue 2.1.10 + slick
I use slick directly in my repo for convenience.
It would have the same problem by using vue-slick

Steps to reproduce

1. click the second button (remove index 0 and 2 at once)
2. console show the DOMException.
   Vue get the wrong parentNode

// error at
function insertBefore (parentNode, newNode, referenceNode) {
  parentNode.insertBefore(newNode, referenceNode);
}

Something I have tried

• remove :key in v-for => would remove double items
• Use slickRemove without items.splice => vue status would be inconsistent
• Use items.splice without slickRemove => slick status would be inconsistent

It's the problem from mixing jQuery-plugin (i.e., slick) and vue, so I am not sure this is the right place to post this problem.
I think this is not the issue from vue-slick or vue or slick.

I would appreciate it if you could give me any hint about how to remove the items.
Thank you.

No destroy method

You have a method to reInit the carousel, but what if i want to only 'unslick' without creating it again.
can we add a destroy method? like this one:
destroy() { $(this.$el).slick('unslick'); },

Not support dynamic data (from firebase for example)

Customizing prev/next button with another font

can i customize that default navigation button with my own?