paper-carousel | Vaadin

Web component to build a responsive carousel

[ This description is mirrored from at on 2019-05-10 ]

Published on



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


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>

Image gallery example:

<paper-carousel items="1" dotText="false">
	<img src="" draggable="false"/>
	<img src="" draggable="false"/>
	<img src="" draggable="false"/>
	<img src="" draggable="false"/>
	<img src="" draggable="false"/>


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

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.


Link to this version
ImportedReleased 14 June 2017MIT License
Framework Support
Polymer 1.0+
Browser Independent
Install with
bower install --save Redbility/paper-carousel"#1.2.5"
Run the above Bower command in your project folder. If you have any issues installing, please contact the author.
Release notes - Version 1.2.5


  • 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