Directory

skeleton-carousel - Vaadin Add-on Directory

Carousel component. Horizontal and vertical swipe navigation skeleton-carousel - Vaadin Add-on Directory
[![Build Status](https://travis-ci.org/FabricElements/skeleton-carousel.svg?branch=master)](https://travis-ci.org/FabricElements/skeleton-carousel) [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/FabricElements/skeleton-carousel) [![Published on Vaadin Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/FabricElementsskeleton-carousel) [![Stars on vaadin.com/directory](https://img.shields.io/vaadin-directory/star/FabricElementsskeleton-carousel.svg)](https://vaadin.com/directory/component/FabricElementsskeleton-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 ```shell $ npm install @fabricelements/skeleton-carousel --save ``` ## Examples ### Basic usage ```html ``` ### Vertical layout ```html ``` ### 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](./CONTRIBUTING.md). ## License Released under the [BSD 3-Clause License](./LICENSE.md).
GitHub Homepage
Issue tracker
Online Demo
Documentation
View on NPM
View on GitHub
License

skeleton-carousel version 2.0.0
### Dependencies * polymer#Polymer/polymer#^2.0.0 * iron-flex-layout#PolymerElements/iron-flex-layout#^2.0.0 * paper-icon-button#PolymerElements/paper-icon-button#^2.0.0 * iron-icons#PolymerElements/iron-icons#^2.0.0 * iron-selector#PolymerElements/iron-selector#^2.0.0 * iron-test-helpers#PolymerElements/iron-test-helpers#^2.0.0

skeleton-carousel version 2.0.1
### Dependencies * polymer#Polymer/polymer#^2.0.0 * iron-flex-layout#PolymerElements/iron-flex-layout#^2.0.0 * paper-icon-button#PolymerElements/paper-icon-button#^2.0.0 * iron-icons#PolymerElements/iron-icons#^2.0.0 * iron-selector#PolymerElements/iron-selector#^2.0.0 * iron-test-helpers#PolymerElements/iron-test-helpers#^2.0.0 * iron-a11y-keys-behavior#PolymerElements/iron-a11y-keys-behavior#^2.0.0

skeleton-carousel version 2.0.2
### Dependencies * polymer#Polymer/polymer#^2.0.0 * iron-flex-layout#PolymerElements/iron-flex-layout#^2.0.0 * paper-icon-button#PolymerElements/paper-icon-button#^2.0.0 * iron-icons#PolymerElements/iron-icons#^2.0.0 * iron-selector#PolymerElements/iron-selector#^2.0.0 * iron-test-helpers#PolymerElements/iron-test-helpers#^2.0.0 * iron-a11y-keys-behavior#PolymerElements/iron-a11y-keys-behavior#^2.0.0

skeleton-carousel version 1.0.2
### Dependencies * polymer#Polymer/polymer#1.9 - 2 * iron-flex-layout#PolymerElements/iron-flex-layout#^2.0.0 * paper-icon-button#PolymerElements/paper-icon-button#^2.0.0 * iron-icons#PolymerElements/iron-icons#^2.0.0 * iron-selector#PolymerElements/iron-selector#^2.0.0 * iron-test-helpers#PolymerElements/iron-test-helpers#^2.0.0

skeleton-carousel version 2.0.3
### Dependencies * polymer#Polymer/polymer#^2.0.0 * iron-flex-layout#PolymerElements/iron-flex-layout#^2.0.0 * paper-icon-button#PolymerElements/paper-icon-button#^2.0.0 * iron-icons#PolymerElements/iron-icons#^2.0.0 * iron-selector#PolymerElements/iron-selector#^2.0.0 * iron-test-helpers#PolymerElements/iron-test-helpers#^2.0.0 * iron-a11y-keys-behavior#PolymerElements/iron-a11y-keys-behavior#^2.0.0

skeleton-carousel version 2.0.4
### Dependencies * polymer#Polymer/polymer#^2.0.0 * iron-flex-layout#PolymerElements/iron-flex-layout#^2.0.0 * paper-icon-button#PolymerElements/paper-icon-button#^2.0.0 * iron-icons#PolymerElements/iron-icons#^2.0.0 * iron-selector#PolymerElements/iron-selector#^2.0.0 * iron-test-helpers#PolymerElements/iron-test-helpers#^2.0.0 * iron-a11y-keys-behavior#PolymerElements/iron-a11y-keys-behavior#^2.0.0

skeleton-carousel version 2.0.5
### Dependencies * polymer#Polymer/polymer#^2.0.0 * iron-flex-layout#PolymerElements/iron-flex-layout#^2.0.0 * paper-icon-button#PolymerElements/paper-icon-button#^2.0.0 * iron-icons#PolymerElements/iron-icons#^2.0.0 * iron-selector#PolymerElements/iron-selector#^2.0.0 * iron-test-helpers#PolymerElements/iron-test-helpers#^2.0.0 * iron-a11y-keys-behavior#PolymerElements/iron-a11y-keys-behavior#^2.0.0

skeleton-carousel version 2.0.6
### Dependencies * polymer#Polymer/polymer#^2.0.0 * iron-flex-layout#PolymerElements/iron-flex-layout#^2.0.0 * paper-icon-button#PolymerElements/paper-icon-button#^2.0.0 * iron-icons#PolymerElements/iron-icons#^2.0.0 * iron-selector#PolymerElements/iron-selector#^2.0.0 * iron-test-helpers#PolymerElements/iron-test-helpers#^2.0.0 * iron-a11y-keys-behavior#PolymerElements/iron-a11y-keys-behavior#^2.0.0

skeleton-carousel version 3.0.0
### 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

skeleton-carousel version 3.0.1
### 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

skeleton-carousel version 3.0.2
### 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

skeleton-carousel version 2.0.7
### Dependencies * polymer#Polymer/polymer#^2.0.0 * iron-flex-layout#PolymerElements/iron-flex-layout#^2.0.0 * paper-icon-button#PolymerElements/paper-icon-button#^2.0.0 * iron-icons#PolymerElements/iron-icons#^2.0.0 * iron-selector#PolymerElements/iron-selector#^2.0.0 * iron-test-helpers#PolymerElements/iron-test-helpers#^2.0.0 * iron-a11y-keys-behavior#PolymerElements/iron-a11y-keys-behavior#^2.0.0