Using slick.js to build an image carousel web component

[Chaks CC]

Hi All,

I am trying to integrate the slick.js image carousel in my web component.

Here is what I have so far: http://jsbin.com/decojilaji/edit?html

I am finding my element in the local DOM in domReady event and then calling the slick method to it.

domReady: function(){        

        //Polymer.dom(this.$.mycarousel).slick(); - this also doesn't work

        this.$.mycarousel.slick();

      }

However, this doesn't work at all.

Any ideas what I am missing?

Thanks,

Chaks

[aurelien]

Could it be made in Dart? (to make them works together)

[Chaks CC]

It seems like domReady is not working properly. It sometimes gets called and other times it doesnt.

I moved to attached function and have this code which still doesn't work.

attached: function() {

       this.async(function() {          

          var x = $(this.$.mycarousel);

          x.slick();

       });

    }

When debugging, it looks like slick is not being registered. I am able to confirm jQuery is loaded and is working, but for some reason the slick doesn't get initialized.

What callback in Polymer guarantees the DOM is ready? Is it attached as documented here? 

[Chaks CC]

So finally I solved this issue and it turned out to be a very basic mistake! D'oh!

I had load the scripts inside <dom-module> and once I did that it all worked.