fix(md-carousel): delay jQuery initialization, fix #268

src/carousel/carousel-item.html

@@ -2,5 +2,6 @@
   <a if.bind="mdHref" href.bind="mdHref">
     <img if.bind="mdImage" src.bind="mdImage" />
   </a>
+  <img if.bind="!mdHref" src.bind="mdImage" />
   <slot></slot>
 </template>

src/carousel/carousel.js

@@ -1,36 +1,51 @@
-import { bindable, customElement } from 'aurelia-templating';
-import { bindingMode } from 'aurelia-binding';
-import { inject } from 'aurelia-dependency-injection';
-import { getBooleanFromAttributeValue } from '../common/attributes';
+import {bindable, children, customElement} from 'aurelia-templating';
+import {bindingMode} from 'aurelia-binding';
+import {inject} from 'aurelia-dependency-injection';
+import {TaskQueue} from 'aurelia-task-queue';
+import {getBooleanFromAttributeValue} from '../common/attributes';
 
 @customElement('md-carousel')
-@inject(Element)
+@inject(Element, TaskQueue)
 export class MdCarousel {
   @bindable() mdIndicators = true;
   @bindable({
     defaultBindingMode: bindingMode.oneTime
   }) mdSlider = false;
+  @children('md-carousel-item') items = [];
 
-  constructor(element) {
+  constructor(element, taskQueue) {
     this.element = element;
+    this.taskQueue = taskQueue;
   }
 
   attached() {
     if (getBooleanFromAttributeValue(this.mdSlider)) {
       this.element.classList.add('carousel-slider');
     }
 
-    let options = {
-      full_width: getBooleanFromAttributeValue(this.mdSlider),
-      indicators: this.mdIndicators
-    };
-
     // workaround for: https://github.com/Dogfalo/materialize/issues/2741
     // if (getBooleanFromAttributeValue(this.mdSlider)) {
     //   $(this.element).carousel({full_width: true});
     // } else {
     //   $(this.element).carousel();
     // }
-    $(this.element).carousel(options);
+    this.refresh();
+  }
+
+  itemsChanged(newValue) {
+    this.refresh();
+  }
+
+  refresh() {
+    if (this.items.length > 0) {
+      let options = {
+        full_width: getBooleanFromAttributeValue(this.mdSlider),
+        indicators: this.mdIndicators
+      };
+
+      this.taskQueue.queueTask(() => {
+        $(this.element).carousel(options);
+      });
+    }
   }
 }