@fabricelements/skeleton-carousel NPM

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

gallery carousel swipe media images slider pictures vertical horizontal lazy-loading lazy material-design material design web-components polymer FabricElements fabric responsive

@polymer/gen-typescript-declarations @polymer/iron-a11y-keys-behavior @polymer/iron-flex-layout @polymer/iron-icons @polymer/iron-selector @polymer/paper-icon-button @polymer/polymer

@everything-registry/sub-chunk-311 @nuskin/my-site

3.0.2

6 years ago

3.0.1

6 years ago

3.0.0

6 years ago