native-gallery

Native Gallery

Native Image Gallery in ~ 100 lines of code.

How it works

• use CSS property scroll-snap-type for snapping
• use CSS property scroll-behavior for smooth JS scrolling
• use loading attribute for Native Lazy Loading
• works with lazysizes.js
• use Custom Events to listen for events
• it was named as native-gallery to become Custom Element in the future

Usage

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>