feat(md-carousel): new "special" carousell from Materialize 0.97.7

src/carousel/carousel-item.html

@@ -1,3 +1,6 @@
-<template>
-  <a class="carousel-item" href.bind="mdHref"><img src.bind="mdImage" /></a>
+<template class="carousel-item">
+  <a if.bind="mdHref" href.bind="mdHref">
+    <img if.bind="mdImage" src.bind="mdImage" />
+  </a>
+  <slot></slot>
 </template>

src/carousel/carousel.css

@@ -0,0 +1,3 @@
+md-carousel {
+  display: block;
+}

src/carousel/carousel.html

@@ -1,3 +1,4 @@
-<template class="carousel" style="display: block;">
+<template class="carousel">
+  <require from="./carousel.css"></require>
   <slot></slot>
 </template>

src/carousel/carousel.js

@@ -6,6 +6,7 @@ import { getBooleanFromAttributeValue } from '../common/attributes';
 @customElement('md-carousel')
 @inject(Element)
 export class MdCarousel {
+  @bindable() mdIndicators = true;
   @bindable({
     defaultBindingMode: bindingMode.oneTime
   }) mdSlider = false;
@@ -19,11 +20,17 @@ export class MdCarousel {
       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();
-    }
+    // if (getBooleanFromAttributeValue(this.mdSlider)) {
+    //   $(this.element).carousel({full_width: true});
+    // } else {
+    //   $(this.element).carousel();
+    // }
+    $(this.element).carousel(options);
   }
 }