Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise

So I'm attempting to use the slick.js carousel plugin within a vue component. This works when there is no nested vue components. However, the moment that I try to use that the nested div wrap that slick uses for the slide track is built, but outside of the repeat. Basically albums just iterates a list of albums and passes all parameters to the sub albums. Everything is initiated, slick works, components work but they are not inside of the slide track which means they don't get the carousel treatment.

I looked into doing directives, slots, etc. and to no avail there is no information regarding this.

Here is my HTML:

<div class="albums-component">
    <div class="albums-container" v-slick>
        <album v-for="album in albums.data"
               :album="album"
               file-types="audio,video,image"
               :fixed-size="fixedSize"
               :show-rotator="showRotator"
               :display-limit="3"
               :columns-lg="columnsLg"
               :columns-md="columnsMd"
               :columns-sm="columnsSm"
               :center-images="centerImages"
               :presenter-enabled="true"
               :manage-enabled="manageEnabled">
        </album>
    </div>
    <button class="left add-button" v-on:click="createAlbum"> + </button>
</div>

Here is my slick directive:

Vue.directive('slick', {
twoWay: true,
priority: 1000,

params: ['options'],

bind: function () {
    var self = this;
    setTimeout(function(){
        $(self.el).slick({
            slidesToShow: 1,
            slidesToScroll: 1,
            elementsExist: true,
            arrows: false,
            fade: true
        });
    }, 1000);

},
update: function (value)
{

},
unbind: function ()
{

}

});

I won't post the album component to keep this post shorty as its quiet lengthy (in terms of props, methods, etc.)

Any insight on how I can achieve this without writing a new carousel component in VueJS would be greatly appreciated!

I was able to get this to work by adding a a setTimeout() with 500ms delay... this doesn't seem very solid though, is there a hook that says when the immediate component is compiled as well as all children components?

share|improve this question
    
Would also like to note, that i tried to do this.$nextTick() for initiating the plugin and still wasn't able to get this working. – anthony.c Jan 29 at 2:35
    
Did you tried to use the attached() hook without using a directive? example: attached () { this.els.slickEl.slick(...) }, I'm only suggesting this because it usually works fine and i never used directives. – TiagoLr Jan 29 at 7:48
    
Yes, I tried that as well – anthony.c Jan 29 at 13:41
    
It's possible that the activation phase is top down, and you need to wait for the subcomponents to be activated/rendered. If that's the problem and you find a solution please post (may be useful), I'd try to use a Vue.nextTick() inside activate first. – TiagoLr Jan 29 at 15:37
    
I would try converting the v-slick directive into a component and have the album component $dispatch an event once it is initialized. Once the slick component receives all of the expected initialization events, then initialize slick. – David K. Hess Feb 2 at 13:44

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.