Polymer material slideshow using materialize media slideshow component under the hood.
bower install polymer-mat-slideshow
For some reason, currently having trouble with this.each in materialize.js not working as expected:
See: http://stackoverflow.com/questions/3106414/in-jquery-how-does-the-this-each-work
return this.each(function() {
// For each slider, we want to keep track of
// which slide is active and its associated contentNo idea why, not a jQuery plugin expert!
This element can be used something like this:
In app/index.html
<head>
<link rel="import" href="bower_components/polymer/polymer.html">
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Import materialize.css -->
<link type="text/css" rel="stylesheet" href="../bower_components/materialize/dist/css/materialize.min.css" media="screen,projection"/>
<!-- jQuery 2 dependency -->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- Import materialize.js -->
<script type="text/javascript" src="../bower_components/materialize/dist/js/materialize.min.js"></script>
</head>
<body>
<!-- use custom slideshow element -->
<my-slideshow id="my-slideshow" slideshow="{{ slideshow }}"></my-slideshow>In app/elements/elements.html
<!-- element imports -->
<link rel="import" href="../bower_components/mat-slideshow/mat-slideshow.html">
<!-- app element imports -->
<link rel="import" href="elements/my-slideshow/my-slideshow.html">Create custom element referenced by index.html
app/elements/my-slideshow/my-slideshow.html
<dom-module id="my-slideshow">
<style>
:host {
display: block;
}
</style>
<template>
<mat-slides options="{{ slideshow.options }}">
<template is="dom-repeat" items="{{ slideshow.items }}" as="slide">
<mat-slide image="{{ slide.image }}" caption="{{ slide.caption }}"></mat-slide>
</template>
</mat-slides>
</template>
</dom-module>
<script>
Polymer({
is: 'my-slideshow',
properties: {
slideshow: Object
}
});
</script>Element dependencies are managed via Bower. You can install that via:
npm install -g bower
Then, go ahead and download the element's dependencies:
bower install
If you wish to work on your element in isolation, we recommend that you usePolyserve to keep your element's bower dependencies in line. You can install it via:
npm install -g polyserve
And you can run it via:
polyserve
Once running, you can preview your element athttp://localhost:8080/components/mat-slideshow/, where mat-slideshow is the name of the directory containing it.
Simply navigate to the /test directory of your element to run its tests. If you are using Polyserve: http://localhost:8080/components/mat-slideshow/test/
The tests are compatible with web-component-tester. Install it via:
npm install -g web-component-tester
Then, you can run your tests on all of your local browsers via:
wct
wct -l chrome will only run tests in chrome.
wct -p will keep the browsers alive after test runs (refresh to re-run).
wct test/some-file.html will test only the files you specify.