A collection of easy to use carousel UI elements.
This element takes slotted elements and controls how they scroll horizontally.
<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>
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.
--carousel-dot-size
--carousel-dot-spacing
--carousel-ui-color
--carousel-ui-background-color
--carousel-ui-ink-color
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.
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.
'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.
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.
$ polymer serve
$ 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.