ADD: example for CSS slider

Author: allrude

src/pages/index.astro

@@ -5,8 +5,77 @@ const title = "Fylgja";
 
 <Layout title={title} hideSearch={true}>
 	<h1>{title}</h1>
+
+	<css-snap-slider>
+		<div
+			data-track
+			class="snap scroll-x grid grid-flow gap flow-unset"
+			style="--md_grid-cols: 2; --md_gap: 4rem;"
+		>
+			<figure class="stack align" style="--align-items: end center;">
+				<img src="https://picsum.photos/id/19/2200/575" width="2200" height="575">
+				<figcaption style="--px: var(--size-4)">Fylgja CSS Slider</figcaption>
+			</figure>
+			<img src="https://picsum.photos/id/34/2200/575" width="2200" height="575">
+			<img src="https://picsum.photos/id/42/2200/575" width="2200" height="575">
+			<img src="https://picsum.photos/id/72/2200/575" width="2200" height="575">
+			<img src="https://picsum.photos/id/94/2200/575" width="2200" height="575">
+		</div>
+		<button data-next hidden>➡️</button>
+		<button data-prev hidden>⬅️</button>
+	</css-snap-slider>
 </Layout>
 
+<script>
+	// @ts-nocheck
+	class CssSnapSlider extends HTMLElement {
+		constructor() {
+			self = super();
+		}
+
+		connectedCallback() {
+			const track = self.querySelector('[data-track]');
+			const prevBtn = self.querySelector('[data-prev]');
+			const nextBtn = self.querySelector('[data-next]');
+
+			const activeSliderObserver = new IntersectionObserver((entries, observer) => {
+				entries.forEach(entry => {
+					const slide = entry.target;
+
+					if (entry.isIntersecting) {
+					// Add the `data-active` attribute when the slide is in view
+					slide.setAttribute('data-active', 'true');
+					} else {
+					// Remove the `data-active` attribute when the slide is out of view
+					slide.removeAttribute('data-active');
+					}
+				});
+			}, {
+				root: null, // Use the viewport as the root
+				threshold: 0.5, // Slide is considered "in view" when 50% of it is visible
+			});
+
+			if (!track) {
+				console.error('No Slider track defined');
+				return;
+			}
+
+			Array.from(track.children).forEach(slide => activeSliderObserver.observe(slide));
+
+			if (prevBtn) {
+				prevBtn.removeAttribute('hidden');
+			}
+
+			if (nextBtn) {
+				nextBtn.removeAttribute('hidden');
+			}
+		}
+	}
+
+	customElements.define("css-snap-slider", CssSnapSlider);
+</script>
+
+
 <style is:global>
 	.page-header {
 		--page-header-bg: transparent;