[](https://travis-ci.org/FabricElements/skeleton-carousel) [](https://www.webcomponents.org/element/FabricElements/skeleton-carousel) [](https://vaadin.com/directory/component/FabricElementsskeleton-carousel) [](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).