polymer-simple-slider

1.1.0 • Public • Published

<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/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

Package Sidebar

Install

npm i polymer-simple-slider

Weekly Downloads

9

Version

1.1.0

License

MIT

Last publish

Collaborators

  • ruyadorno