paper-carousel - Vaadin Add-on Directory
Web component to build a responsive carousel
**[ This description is mirrored from README.md at [github.com/Redbility/paper-carousel](https://github.com//Redbility/paper-carousel/blob/1.2.5/README.md) on 2019-05-10 ]**
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg?style=flat-square)](https://beta.webcomponents.org/element/Redbility/paper-carousel)
# Paper-carousel
### Description
Polymer element for displaying a responsive carousel.
### Install
Bower is necessary to manage the element. [Have a look at their website](http://bower.io/) for more details.
```sh
bower install --save Redbility/paper-carousel
```
### Examples
Simple use example:
```html
```
Image gallery example:
```html
```
### Attributes
| Attribute Name | Functionality | Type | Default |
|----------------|-------------|-------------|-------------|
| items | Number of slides shown on each page | Number | 1 |
| responsive | String that contains information about breakpoints | String | null |
| controls | Shows or hides the forward and backward page controls | Boolean | true |
| dots | Shows or hides the navigation dots | Boolean | true |
| dotText | Shows or hides numbers inside dots | Boolean | true |
| prevIcon | Allows customize the prev arrow icon | String | image:navigate-before |
| nextIcon | Allows customize the next arrow icon | String | image:navigate-next |
| loop | Allows repeat slides infinitely | Boolean | false |
| autoplay | Allows play automatically | Boolean | false |
| autoplaytime | Sets the time of autoplay in milliseconds | Number | 6000 |
| transitionspeed | Sets transition speed in milliseconds | Number | 500 |
### Methods
| Method Name | Explanation |
|-------------|-------------|
| getTotalItems() | Gets the number of total items inside carousel |
| getTotalPages() | Gets the number of total pages of carousel |
| getCurrentItem() | Gets the active item |
| goToItem(number) | Moves carousel to the item position |
| goToNextItem() | Moves carousel to the next item |
| goToPrevItem() | Moves carousel to the prev item |
| getCurrentPage() | Gets the active page |
| goToPage(number) | Moves carousel to the page position |
| goToNextPage() | Moves carousel to the next page |
| goToPrevPage() | Moves carousel to the prev page |
| refresh() | Forces carousel reload |
### Events
| Event Name | Explanation |
|-------------|-------------|
| onmove | Is called each time the carousel moves |
### How to contribute
This element has been developed on Pug, Sass and CoffeeScript, you can find this files at `source` folder.
To manage and compile this languages you will have to use [Gulp](http://gulpjs.com/).
You will find a folder called `tools`, that folder includes gulpfile.js and package.json.
When the dependencies have been installed, you can launch the different tasks of gulpFile from the `tools` folder.
You can try the component with following command:
```sh
gulp serve
```
The serve task creates a server where visualize the component, watches for changes on the files and reload the page after compile it.
GitHub Homepage
View on GitHub
Issue tracker
paper-carousel version 1.1.6
### Dependencies
* polymer#polymer/polymer#^v1.2.0
* iron-icons#PolymerElements/iron-icons#^1.0.0
* iron-resizable-behavior#PolymerElements/iron-resizable-behavior#^1.0.0
* paper-styles#PolymerElements/paper-styles#^1.0.0
paper-carousel version 1.1.7
### Dependencies
* polymer#polymer/polymer#^v1.2.0
* iron-icons#PolymerElements/iron-icons#^1.0.0
* iron-resizable-behavior#PolymerElements/iron-resizable-behavior#^1.0.0
* paper-styles#PolymerElements/paper-styles#^1.0.0
paper-carousel version 1.1.8
### Dependencies
* polymer#polymer/polymer#^v1.2.0
* iron-icons#PolymerElements/iron-icons#^1.0.0
* iron-resizable-behavior#PolymerElements/iron-resizable-behavior#^1.0.0
* paper-styles#PolymerElements/paper-styles#^1.0.0
paper-carousel version 1.1.9
### Dependencies
* polymer#polymer/polymer#^v1.2.0
* iron-icons#PolymerElements/iron-icons#^1.0.0
* iron-resizable-behavior#PolymerElements/iron-resizable-behavior#^1.0.0
* paper-styles#PolymerElements/paper-styles#^1.0.0
paper-carousel version 1.2.0
### Dependencies
* polymer#polymer/polymer#^v1.2.0
* iron-icons#PolymerElements/iron-icons#^1.0.0
* iron-resizable-behavior#PolymerElements/iron-resizable-behavior#^1.0.0
* paper-styles#PolymerElements/paper-styles#^1.0.0
paper-carousel version 1.2.1
### Dependencies
* polymer#polymer/polymer#^v1.2.0
* iron-icons#PolymerElements/iron-icons#^1.0.0
* iron-resizable-behavior#PolymerElements/iron-resizable-behavior#^1.0.0
* paper-styles#PolymerElements/paper-styles#^1.0.0
paper-carousel version 1.2.2
### Dependencies
* polymer#polymer/polymer#^v1.2.0
* iron-icons#PolymerElements/iron-icons#^1.0.0
* iron-resizable-behavior#PolymerElements/iron-resizable-behavior#^1.0.0
* paper-styles#PolymerElements/paper-styles#^1.0.0
paper-carousel version 1.2.3
### Dependencies
* polymer#polymer/polymer#^v1.2.0
* iron-icons#PolymerElements/iron-icons#^1.0.0
* iron-resizable-behavior#PolymerElements/iron-resizable-behavior#^1.0.0
* paper-styles#PolymerElements/paper-styles#^1.0.0
paper-carousel version 1.2.4
### Dependencies
* polymer#polymer/polymer#^v1.2.0
* iron-icons#PolymerElements/iron-icons#^1.0.0
* iron-resizable-behavior#PolymerElements/iron-resizable-behavior#^1.0.0
* paper-styles#PolymerElements/paper-styles#^1.0.0
paper-carousel version 1.2.5
### Dependencies
* polymer#polymer/polymer#^v1.2.0
* iron-icons#PolymerElements/iron-icons#^1.0.0
* iron-resizable-behavior#PolymerElements/iron-resizable-behavior#^1.0.0
* paper-styles#PolymerElements/paper-styles#^1.0.0