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 → korywka → native-gallery

korywka / native-gallery

Licence: other
native image gallery in ~100 lines of code

Programming Languages

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

Labels

image-gallerycarousel

Projects that are alternatives of or similar to native-gallery

React Awesome Slider
React content transition slider. Awesome Slider is a 60fps, light weight, performant component that renders an animated set of production ready UI general purpose sliders with fullpage transition support for NextJS and GatsbyJS. 🖥️ 📱
Stars: ✭ 2,343 (+12231.58%)
Mutual labels:  image-gallery, carousel
React Alice Carousel
React responsive component for building content galleries, content rotators and any React carousels
Stars: ✭ 419 (+2105.26%)
Mutual labels:  image-gallery, carousel
react-native-image-page
react-native image-carousel with zoom-pan gestures and full-screen support, work on both iOS and Android
Stars: ✭ 19 (+0%)
Mutual labels:  image-gallery, carousel
React Image Gallery
React carousel image gallery component with thumbnail support 🖼
Stars: ✭ 2,946 (+15405.26%)
Mutual labels:  image-gallery, carousel
qis
Dynamic image server for web and print
Stars: ✭ 85 (+347.37%)
Mutual labels:  image-gallery
ng2-carouselamos
Simple carousel/slider for angular 2.
Stars: ✭ 39 (+105.26%)
Mutual labels:  carousel
vue-product-carousel
Simple product carousel with hot image replacement, Zoom and Swipe mode
Stars: ✭ 37 (+94.74%)
Mutual labels:  carousel
MediaSliderView
Pure java based, highly customizable media slider gallery supporting both images and videos for android.
Stars: ✭ 85 (+347.37%)
Mutual labels:  carousel
jquery.circular-carousel
[ABANDONED] A 3D-like circular carousel plugin for jQuery.
Stars: ✭ 49 (+157.89%)
Mutual labels:  carousel
angular-simple-slider
An AngularJS directive providing a simple slider functionality
Stars: ✭ 15 (-21.05%)
Mutual labels:  carousel
react-native-reanimated-carousel
🎠 React Native swiper/carousel component, fully implemented using reanimated v2, support to iOS/Android/Web. (Swiper/Carousel)
Stars: ✭ 1,461 (+7589.47%)
Mutual labels:  carousel
GNCarousel
Carousel based on web design
Stars: ✭ 19 (+0%)
Mutual labels:  carousel
vue3-carousel
Vue 3 carousel component
Stars: ✭ 379 (+1894.74%)
Mutual labels:  carousel
yii2-gallery-widget
BlueImp Gallery Widget for Yii2
Stars: ✭ 60 (+215.79%)
Mutual labels:  carousel
react-native-carousel-pager
React Native carousel pager.
Stars: ✭ 90 (+373.68%)
Mutual labels:  carousel
react-instagram-zoom-slider
🌄↔️ A slider component with pinch to zoom capabilities inspired by Instagram
Stars: ✭ 67 (+252.63%)
Mutual labels:  carousel
react-magic-slider-dots
React Magic Dots Component for React Slick Carousel (inspired by Instagram)
Stars: ✭ 21 (+10.53%)
Mutual labels:  carousel
infinite-carousel-flutter
Carousel in flutter. Supports infinite looping and gives control over anchor and velocity.
Stars: ✭ 24 (+26.32%)
Mutual labels:  carousel
flexbox-carousel
CSS3 Animated Carousel with Flexbox
Stars: ✭ 23 (+21.05%)
Mutual labels:  carousel
CarouselOverlappingCards-Flutter
Overlapping cards vertical scrolling with carousel effect
Stars: ✭ 14 (-26.32%)
Mutual labels:  carousel
View All Similar Projects ➔

native-gallery

native image gallery in ~ 100 lines of code.

How it works

Usage

npm package: native-gallery

import NativeGallery from 'native-gallery';

const target = document.querySelector('native-gallery');
const gallery = new NativeGallery(target);

// navigation:
gallery.prev();
gallery.next();

// events are fired on target DOM node:
target.addEventListener('change', (event) => {
  console.log(`${event.detail.current} / ${event.detail.count}`);
});
<!-- include CSS file -->
<link href="styles.css" rel="stylesheet">

<!-- gallery markup -->
<native-gallery>
  <img src="1.jpg" width="1600" height="900" alt="">
  <img src="2.jpg" width="675" height="900" alt="" loading="lazy">
  <img src="3.jpg" width="1600" height="900" alt="" loading="lazy">
  <img src="4.jpg" width="1600" height="900" alt="" loading="lazy">
  <img src="5.jpg" width="1600" height="900" alt="" loading="lazy">
</native-gallery>
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].