https://github.com/ruyadorno/polymer-simple-slider

A Polymer element providing a simple slider functionality
https://github.com/ruyadorno/polymer-simple-slider

carousel html polymer-element simple-slider slide slider

Last synced: 15 days ago
JSON representation

A Polymer element providing a simple slider functionality

• Host: GitHub
• URL: https://github.com/ruyadorno/polymer-simple-slider
• Owner: ruyadorno
• License: mit
• Created: 2014-03-08T19:31:41.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2017-03-13T15:50:00.000Z (over 7 years ago)
• Last Synced: 2024-10-17T03:14:11.082Z (about 1 month ago)
• Topics: carousel, html, polymer-element, simple-slider, slide, slider
• Language: HTML
• Homepage: http://ruyadorno.github.io/polymer-simple-slider/
• Size: 368 KB
• Stars: 22
• Watchers: 3
• Forks: 13
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# <simple-slider>

[![NPM version](https://badge.fury.io/js/polymer-simple-slider.svg)](https://npmjs.org/package/polymer-simple-slider) [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://beta.webcomponents.org/element/ruyadorno/polymer-simple-slider)

A Polymer element providing a [simple slider](http://ruyadorno.github.io/SimpleSlider) functionality.

> Maintained by [Ruy Adorno](https://github.com/ruyadorno).

## Demo

```html

    

    

    

    

```

 > [Check more examples](http://ruyadorno.github.io/polymer-simple-slider).

## Usage

1. Install using Bower (also available on npm)

    ```sh

    bower install --save polymer-simple-slider

    ```

2. Import Web Components' polyfill:

    ```html

    

    ```

3. Import Custom Element:

    ```html

    

    ```

4. Start using it!

    ```html

    

        

        

        

    

    ```

## 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](https://github.com/ruyadorno/polymer-simple-slider/releases).

## More info

This project is a simple polymer element implementation of [SimpleSlider](http://ruyadorno.github.io/SimpleSlider/). Please visit its page for more information.

## License

[MIT License](http://opensource.org/licenses/MIT)