skeleton-carousel
Carousel component. Horizontal and vertical swipe navigation
<skeleton-carousel>
skeleton-carousel
is a web component that provides a carousel for images and other content.
Features
- Horizontal and vertical carousel.
- Lazy load content with the property
data-src
. - Swipe navigation capabilities.
- Keyboard navigation.
←
↑
→
↓
- Hide/Display only the navigation that you need.
- Custom styles.
- Automatic animation with custom time.
Installation
$ npm install @fabricelements/skeleton-carousel --save
Examples
Basic usage
<skeleton-carousel dots nav loop>
<iron-image placeholder="https://source.unsplash.com/category/nature/10x10"
data-src="https://source.unsplash.com/category/nature/500x300"
sizing="cover"
preload
fade
></iron-image>
<iron-image placeholder="https://source.unsplash.com/category/food/10x10"
data-src="https://source.unsplash.com/category/food/500x300"
sizing="cover"
preload
fade
></iron-image>
<iron-image placeholder="https://source.unsplash.com/category/buildings/10x10"
data-src="https://source.unsplash.com/category/buildings/500x300"
sizing="cover"
preload
fade
></iron-image>
</skeleton-carousel>
Vertical layout
<skeleton-carousel dots nav loop direction="vertical" auto>
<iron-image placeholder="https://source.unsplash.com/category/nature/10x10"
data-src="https://source.unsplash.com/category/nature/500x300"
sizing="cover"
preload
fade
></iron-image>
<iron-image placeholder="https://source.unsplash.com/category/food/10x10"
data-src="https://source.unsplash.com/category/food/500x300"
sizing="cover"
preload
fade
></iron-image>
<iron-image placeholder="https://source.unsplash.com/category/buildings/10x10"
data-src="https://source.unsplash.com/category/buildings/500x300"
sizing="cover"
preload
fade
></iron-image>
</skeleton-carousel>
Attributes
alt
(boolean) - Flips the position of the navigation. Puts the navigation at the top of the carousel for the horizontal layout and to the left for the vertical layout.animating
(boolean) - Read-only value that indicates if the carousel is been animated (Transition).auto
(boolean) - Change slides automatically.direction
(string) - Carousel direction (horizontal or vertical).disabled
(boolean) - Disables component.disable-swipe
(boolean) - Disables swipe functionality.disable-keys
(boolean) - Disables keyboard navigation.duration
(number) - Autoplay interval time in milliseconds (Default:4000
)dots
(boolean) - Show navigation dots.end
(boolean) - Detail returnstrue
when the carousel has reached the last slide.loop
(boolean) - Determines if the carousel should be looped. This affects the controls and the drag and drop functionality. Set totrue
if you need to loop the slides.nav
(boolean) - Show navigation next/prev buttons.selected
(number) - Selected slide (Starts at0
)total
(number) - Read-only value that reflects the total number of slides.
Events
animating-changed
- Fired when theanimating
property has changed.end
- Fired when the carousel has reached the last slide.end-changed
- Fired when theend
property has changed.selected-changed
- Fired when theselected
property has changed.selected-item-changed
- Fired when theselectedItem
property has changed.show-next-changed
- Fired when theshowNext
property has changed.show-prev-changed
- Fired when theshowPrev
property has changed.swiping-changed
- Fired when theswiping
property has changed.total-changed
- Fired when thetotal
property has changed.
Styling
The following custom properties and mixins are available for styling:
Custom property | Description | Default |
---|---|---|
--skeleton-carousel |
Mixin applied to the carousel | {} |
--skeleton-carousel-min-height |
Carousel minimum height | 300px |
--skeleton-carousel-container |
Mixin applied to the container | {} |
--skeleton-carousel-container-horizontal |
Mixin applied to horizontal container | {} |
--skeleton-carousel-container-vertical |
Mixin applied to vertical container | {} |
--skeleton-carousel-item |
Mixin applied to slotted item | {} |
--skeleton-carousel-item-selected |
Mixin applied to slotted selected item | {} |
--skeleton-carousel-controls |
Mixin applied to the controls | {} |
--skeleton-carousel-controls-horizontal |
Mixin applied to horizontal controls | {} |
--skeleton-carousel-controls-vertical |
Mixin applied to vertical controls | {} |
--skeleton-carousel-dots |
Mixin applied to dots container | {} |
--skeleton-carousel-dot |
Mixin applied to each dot | {} |
--skeleton-carousel-dot-color |
Dot color | var(--paper-grey-900) |
--skeleton-carousel-dot-selected |
Mixin applied to selected dot | {} |
--skeleton-carousel-dot-disabled |
Mixin applied to selected dot | {} |
--skeleton-carousel-nav |
Mixin applied to navigation buttons | {} |
--skeleton-carousel-nav-color |
Navigation buttons color | var(--paper-grey-900) |
--skeleton-carousel-nav-disabled |
Mixin applied to disabled navigation | {} |
--skeleton-carousel-nav-disabled-color |
Navigation buttons disabled color | var(--paper-grey-900) |
--skeleton-carousel-nav-prev |
Mixin applied to previous button | {} |
--skeleton-carousel-nav-next |
Mixin applied to next button | {} |
--skeleton-carousel-transition |
Transition mixin () | {} |
Contributing
Please check CONTRIBUTING.
License
Released under the BSD 3-Clause License.
Links
Compatibility
Was this helpful? Need more help?
Leave a comment or a question below. You can also join
the chat on Discord or
ask questions on StackOverflow.
Version
Dependencies
- @polymer/gen-typescript-declarations#^1.2.2
- @polymer/iron-a11y-keys-behavior#^3.0.0-pre.18
- @polymer/iron-flex-layout#^3.0.0-pre.18
- @polymer/iron-icons#^3.0.0-pre.18
- @polymer/iron-selector#^3.0.0-pre.18
- @polymer/paper-icon-button#^3.0.0-pre.18
- @polymer/polymer#^3.0.0
- Released
- 2018-06-19
- Maturity
- IMPORTED
- License
- BSD 3-clause "New" or "Revised" License
Compatibility
- Framework
- Polymer 3.0+
- Polymer 2.0+ in 2.0.0
- Browser
- Browser Independent
Vaadin Add-on Directory
Find open-source widgets, add-ons, themes, and integrations for your Vaadin application.
The channel for finding, promoting, and distributing Vaadin add-ons.