polymer-simple-slider

Simple examples of how to use the web component provided on
https://github.com/ruyadorno/polymer-simple-slider

Change event example


<simple-slider id="nav-slider" style="width:612px; height:612px" auto-play="false">
    <img src="http://placekitten.com/g/612/612"/>
    <img src="https://unsplash.it/612/612/?random=0"/>
    <img src="https://unsplash.it/612/612/?random=1"/>
    <img src="https://unsplash.it/612/612/?random=2"/>
</simple-slider>

<div id="actual-slide-count" style="font-size: 72px; background: #FFF; position: absolute; top: 10px; left: 10px; z-index: 10;">0</div>

<script>
    document.getElementById('nav-slider').addEventListener('change', function (e) {
        document.getElementById('actual-slide-count').textContent = e.detail.nextIndex;
    });
</script>

More examples