app-carousels
A collection of easy to use carousel UI elements.
<app-carousel>
This element takes slotted elements and controls how they scroll horizontally.
Example Usage
<app-carousel auto-play
dots
flip-time="3500"
nav
position="start">
<my-carousel-item></my-carousel-item>
<my-carousel-item></my-carousel-item>
<my-carousel-item></my-carousel-item>
</app-carousel>
Styling
Since the scroller element is 'display: flex', you may have to set a 'flex-basis', 'min-width', etc. on your elements to get the desired layout.
Both default to 8px.
--carousel-dot-size
--carousel-dot-spacing
Nav butons and Dots, plus Play/Stop icons.
--carousel-ui-color
--carousel-ui-background-color
--carousel-ui-ink-color
Public Api
Properties:
auto-play Boolean false, Starts player immediately.
dots Boolean false, Section index ui dots.
flip-time Number 3000, Milliseconds to wait between each flip.
nav Boolean false, Include nav ui.
position String 'center', How carousel positions elements relative to self.
Methods:
animateToSection(index) Animate to a given section by index number.
moveToSection(index) Instant move to a given section by index number.
nextItem(direction, recycle) Animate to next slide, pass in direction and if it should wrap from last slide to begining slide.
play() Start carousel flips.
stop() Stop carousel flips.
Events:
'app-carousel-centered-item-changed', {value: item} Fired each time a new element becomes centered in the carousel.
'app-carousel-section-index-changed', {value: index} Fired each time the section index changes.
'app-carousel-sections-changed', {value: sections} Fired each time items in the carousel change, thus triggering new section items creation.
Install the Polymer-CLI
First, make sure you have the Polymer CLI and npm (packaged with Node.js) installed. Run npm install to install your element's dependencies, then run polymer serve to serve your element locally.
Viewing Your Element
$ polymer serve
Running Tests
$ polymer test
Your application is already set up to be tested via web-component-tester. Run polymer test to run your application's test suite locally.