Skip to content
This repository has been archived by the owner on Aug 8, 2018. It is now read-only.

Latest commit

 

History

History
114 lines (95 loc) · 4.18 KB

README.md

File metadata and controls

114 lines (95 loc) · 4.18 KB
Raw

Published on webcomponents.org

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.