paper-carousel
Web component to build a responsive carousel
[ This description is mirrored from README.md at github.com/Redbility/paper-carousel on 2019-05-10 ]
Paper-carousel
Description
Polymer element for displaying a responsive carousel.
Install
Bower is necessary to manage the element. Have a look at their website for more details.
bower install --save Redbility/paper-carousel
Examples
Simple use example:
<paper-carousel items="3" responsive="600:2, 460:1" controls="true" dots="true" dotText="false">
<div class="paper-carousel-demo-indigo" data-text="#1"></div>
<div class="paper-carousel-demo-pink" data-text="#2"></div>
<div class="paper-carousel-demo-teal" data-text="#3"></div>
<div class="paper-carousel-demo-amber" data-text="#4"></div>
<div class="paper-carousel-demo-blue" data-text="#5"></div>
<div class="paper-carousel-demo-green" data-text="#6"></div>
</paper-carousel>
Image gallery example:
<paper-carousel items="1" dotText="false">
<img src="https://unsplash.it/800/500/?image=257" draggable="false"/>
<img src="https://unsplash.it/800/500/?image=250" draggable="false"/>
<img src="https://unsplash.it/800/500/?image=399" draggable="false"/>
<img src="https://unsplash.it/800/500/?image=146" draggable="false"/>
<img src="https://unsplash.it/800/500/?image=248" draggable="false"/>
</paper-carousel>
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.
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:
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.
Links
Compatibility
Was this helpful? Need more help?
Leave a comment or a question below. You can also join
the chat on Discord or
ask questions on StackOverflow.
Version
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
- Released
- 2017-06-14
- Maturity
- IMPORTED
- License
- MIT License
Compatibility
- Framework
- Polymer 1.0+
- Browser
- Browser Independent