Contact us
Get started

Directory

← Back

skeleton-carousel

Carousel component. Horizontal and vertical swipe navigation

Author

Contributors

Rating

Links

Build Status Published on webcomponents.org Published on Vaadin Directory Stars on vaadin.com/directory

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.

Links

Compatibility

(Loading compatibility data...)

Last updated: 2017-12-07

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
Online