GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → FabricElements → skeleton-carousel

FabricElements / skeleton-carousel

Licence: BSD-3-Clause license
Carousel component. Horizontal and vertical swipe navigation

Programming Languages

javascript
184084 projects - #8 most used programming language
HTML
75241 projects

Labels

gallerymaterial-designpolymerwebcomponentsslidercarouselswipelazy-loading

Projects that are alternatives of or similar to skeleton-carousel

Splide
Splide is a lightweight, powerful and flexible slider and carousel, written in pure JavaScript without any dependencies.
Stars: ✭ 786 (+2435.48%)
Mutual labels:  slider, carousel, swipe, lazy-loading
react-gallery-carousel
Mobile-friendly gallery carousel 🎠 with server side rendering, lazy loading, fullscreen, thumbnails, touch, mouse emulation, RTL, keyboard navigation and customisations.
Stars: ✭ 178 (+474.19%)
Mutual labels:  gallery, carousel, swipe, lazy-loading
Slider
Touch swipe image slider/slideshow/gallery/carousel/banner mobile responsive bootstrap
Stars: ✭ 2,046 (+6500%)
Mutual labels:  gallery, slider, carousel, swipe
React Responsive Carousel
React.js Responsive Carousel (with Swipe)
Stars: ✭ 1,962 (+6229.03%)
Mutual labels:  gallery, slider, carousel, swipe
Swiper
Most modern mobile touch slider with hardware accelerated transitions
Stars: ✭ 29,519 (+95122.58%)
Mutual labels:  gallery, slider, carousel, swipe
React Soft Slider
Simple, fast and impartial slider
Stars: ✭ 54 (+74.19%)
Mutual labels:  slider, carousel, swipe
Vue Picture Swipe
🖼 Vue Picture Swipe Gallery (a gallery of image with thumbnails, lazy-load and swipe) backed by photoswipe
Stars: ✭ 322 (+938.71%)
Mutual labels:  gallery, carousel, swipe
React Native Swiper Flatlist
👆 Swiper component implemented with FlatList using Hooks & Typescript + strict automation tests with Detox
Stars: ✭ 217 (+600%)
Mutual labels:  slider, carousel, swipe
Vue Gallery
📷 Responsive and customizable image and video gallery, carousel and lightbox, optimized for both mobile and desktop web browsers.
Stars: ✭ 405 (+1206.45%)
Mutual labels:  gallery, slider, carousel
React Grid Carousel
React responsive carousel component w/ grid layout
Stars: ✭ 29 (-6.45%)
Mutual labels:  gallery, slider, carousel
React Siema
ReactSiema Demo
Stars: ✭ 90 (+190.32%)
Mutual labels:  gallery, slider, carousel
MediaSliderView
Pure java based, highly customizable media slider gallery supporting both images and videos for android.
Stars: ✭ 85 (+174.19%)
Mutual labels:  gallery, slider, carousel
iron-swipeable-pages
[Polymer 1.x] Element that enables switching between different pages by swiping gesture.
Stars: ✭ 51 (+64.52%)
Mutual labels:  polymer, webcomponents, swipe
vue3-carousel
Vue 3 carousel component
Stars: ✭ 379 (+1122.58%)
Mutual labels:  slider, carousel
paper-chip
A chip web component made with Polymer 2 following Material Design guidelines
Stars: ✭ 30 (-3.23%)
Mutual labels:  polymer, webcomponents
mapbox-gl
Polymer 2.0 custom element for mapbox-gl-js. Uses WebGL to render interactive maps from vector tiles and Mapbox styles - compatible with deck-gl.
Stars: ✭ 24 (-22.58%)
Mutual labels:  polymer, webcomponents
vaadin-dialog
High quality web component for modal dialogs. Part of the Vaadin platform.
Stars: ✭ 15 (-51.61%)
Mutual labels:  polymer, webcomponents
polytimer
polytimer.rocks
Stars: ✭ 24 (-22.58%)
Mutual labels:  polymer, webcomponents
angular-simple-slider
An AngularJS directive providing a simple slider functionality
Stars: ✭ 15 (-51.61%)
Mutual labels:  slider, carousel
embla-carousel-wheel-gestures
wheel interactions for Embla Carousel
Stars: ✭ 30 (-3.23%)
Mutual labels:  gallery, slider
View All Similar Projects ➔

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.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].