/polymer-simple-slider

A Polymer element providing a simple slider functionality

Primary LanguageHTMLMIT LicenseMIT

<simple-slider>

NPM version Published on webcomponents.org

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/webcomponentsjs/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
auto-reload Boolean false If this attr is present the slider is reset whenever one of its child elements change

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