Narcoleptic Pasta Manufacturer

    @fabricelements/skeleton-carousel
    TypeScript icon, indicating that this package has built-in type declarations

    3.0.2 • Public • Published

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

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

    Install

    npm i @fabricelements/skeleton-carousel

    DownloadsWeekly Downloads

    47

    Version

    3.0.2

    License

    BSD-3-Clause

    Unpacked Size

    63.5 kB

    Total Files

    18

    Last publish

    Collaborators

    • erny