native-gallery

native-gallery

native image gallery in ~ 100 lines of code.

How it works

• CSS property scroll-snap-type for snapping
• CSS property scroll-behavior for smooth JS scrolling
• loading attribute for Native Lazy Loading
• Compatible with lazysizes.js
• Custom Events
• It was named as native-gallery to become Custom Element in the future
• Disadvantages: circular scrolling is not implemented yet 🤷‍♀️

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>