<simple-slider>

A Polymer element providing a simple slider functionality.

Maintained by Ruy Adorno.

Demo

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

Check more examples.

Usage

1. Install using Bower (also available on npm)

   bower install --save polymer-simple-slider

2. Import Web Components' polyfill:

   <script src="bower_components/webcomponents.js/webcomponents.js"></script>

3. Import Custom Element:

   <link rel="import" href="bower_components/polymer-simple-slider/simple-slider.html">

4. Start using it!

   <simple-slider style="width:500px; height:500px">
       <img src="foo/bar1.png"/>
       <img src="foo/bar2.png"/>
       <img src="foo/bar3.png"/>
   </simple-slider>

Options

version: 1.1.0

Attribute | Options | Default | Description --- | --- | --- | --- no-auto-play | Boolean | false | If this attr is present, do not auto play slides transitionProperty | left, right, opacity| left | Determines the css property to be animated transitionDuration | Number | 0.5 | Value setting the duration of animation transition transitionDelay | Number | 3 | Value determining the wait between each animation when you use autoPlay:true startValue | Number | -elem.width | Initial value of slide elements when starting a transition animation visibleValue | Number | 0 | The value a slide element should have when it is displayed endValue | Number | elem.width | The value a slide will move to during a transition animation

Contributing

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -m 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request :D

History

For detailed changelog, check Releases.

More info

This project is a simple polymer element implementation of SimpleSlider. Please visit its page for more information.

License

MIT License