Polymer element for displaying a responsive carousel.
Bower is necessary to manage the element. Have a look at their website for more details.
bower install --save Redbility/paper-carouselSimple 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>| 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 |
| 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 |
| Event Name | Explanation |
|---|---|
| onmove | Is called each time the carousel moves |
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 serveThe serve task creates a server where visualize the component, watches for changes on the files and reload the page after compile it.