<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 returns true
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 to true
if you need to loop the slides.nav
(boolean) - Show navigation next/prev buttons.selected
(number) - Selected slide (Starts at 0
)total
(number) - Read-only value that reflects the total number of slides.
Events
animating-changed
- Fired when the animating
property has changed.end
- Fired when the carousel has reached the last slide.end-changed
- Fired when the end
property has changed.selected-changed
- Fired when the selected
property has changed.selected-item-changed
- Fired when the selectedItem
property has changed.show-next-changed
- Fired when the showNext
property has changed.show-prev-changed
- Fired when the showPrev
property has changed.swiping-changed
- Fired when the swiping
property has changed.total-changed
- Fired when the total
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.