<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.