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?
v-slick
directive into a component and have thealbum
component$dispatch
an event once it is initialized. Once theslick
component receives all of the expected initialization events, then initialize slick. – David K. Hess Feb 2 at 13:44