Horizontal Scrollable  Grid with non-clickable grid items. Scrolls off screen on desktop and mobile. This requires javascript to function.

j-horizontal-scroll

/* --- .j-horizontal-scroll Horizontal Scroll Styles --- */

.j-horizontal-scroll .g-content-array {
 flex-wrap: nowrap !important;
 justify-content: flex-start !important;
 align-items: flex-start !important;
 overflow-x: auto !important;
 padding-bottom: 1.5rem !important;
 scrollbar-width: thin;
 cursor: grab;
 user-select: none;
 -webkit-user-select: none;

 /* Full-bleed breakout aligned with container edge */
 width: 100% !important;
 box-sizing: content-box !important;
 margin-left: calc(50% - 50vw) !important;
 margin-right: calc(50% - 50vw) !important;
 padding-left: calc(50vw - 50%) !important;
 padding-right: calc(50vw - 50%) !important;
 scroll-padding-left: calc(50vw - 50%) !important;
 scroll-padding-right: calc(50vw - 50%) !important;
}

.j-horizontal-scroll .g-content-array:active {
 cursor: grabbing;
}

/* Scrollbar Styling */
.j-horizontal-scroll .g-content-array::-webkit-scrollbar {
 height: 8px;
}

.j-horizontal-scroll .g-content-array::-webkit-scrollbar-track {
 background: rgba(0, 0, 0, 0.05);
 border-radius: 4px;
}

.j-horizontal-scroll .g-content-array::-webkit-scrollbar-thumb {
 background: rgba(26, 60, 130, 0.4);
 border-radius: 4px;
}

.j-horizontal-scroll .g-content-array::-webkit-scrollbar-thumb:hover {
 background: rgba(26, 60, 130, 0.8);
}

/* Grid Item Sizing */
.j-horizontal-scroll .g-grid {
 flex: 0 0 calc(33.333% - 21.44px) !important;
 max-width: calc(33.333% - 21.44px) !important;
 scroll-snap-align: start;
}

.j-horizontal-scroll .g-array-item-image {
 overflow: hidden !important;
 display: block;
}

/* Hover Effects */
.j-horizontal-scroll .g-array-item-image img {
 transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.5s ease !important;
}

.j-horizontal-scroll .g-array-item-image a:hover img {
 transform: scale(1.05) !important;
 opacity: 0.9 !important;
}

.j-horizontal-scroll .g-item-title a {
 transition: color 0.3s ease;
}

.j-horizontal-scroll .g-item-title a:hover {
 color: rgb(198, 147, 56) !important;
}

/* Mobile Responsiveness */
@media (max-width: 50.99rem) {
 .j-horizontal-scroll .g-grid {
 flex: 0 0 calc(85% - 16px) !important;
 max-width: calc(85% - 16px) !important;
 scroll-snap-align: center;
 }

 .j-horizontal-scroll .g-content-array {
 scroll-padding: 0 7.5% !important;
 scroll-snap-type: x mandatory !important;
 }

 /* Target site-sub only when it contains our specific scroll section */
 .site-sub:has(.j-horizontal-scroll) .g-content-array .g-grid:not(:first-child) .g-content {
 padding-top: 0 !important;
 }
}

document.addEventListener('DOMContentLoaded', () => {
 // Updated selector to match the new class name
 const sliders = document.querySelectorAll('.j-horizontal-scroll .g-content-array');

 sliders.forEach(slider => {
 let isDown = false;
 let startX;
 let scrollLeft;
 let velocity = 0;
 let lastX = 0;
 let momentumID;

 // The inertia/momentum function
 const beginMomentum = () => {
 slider.scrollLeft += velocity;
 velocity *= 0.80; // Heavier friction: stops the slide quicker
 
 if (Math.abs(velocity) > 0.5) {
 momentumID = requestAnimationFrame(beginMomentum);
 }
 };

 slider.addEventListener('mousedown', (e) => {
 isDown = true;
 cancelAnimationFrame(momentumID); // Stop any existing glide
 slider.style.scrollBehavior = 'auto'; // Immediate 1:1 dragging response
 startX = e.pageX - slider.offsetLeft;
 scrollLeft = slider.scrollLeft;
 lastX = e.pageX;
 });

 const endDrag = () => {
 if (!isDown) return;
 isDown = false;
 beginMomentum(); // Start the heavy glide when mouse is released
 };

 slider.addEventListener('mouseleave', endDrag);
 slider.addEventListener('mouseup', endDrag);

 slider.addEventListener('mousemove', (e) => {
 if (!isDown) return;
 e.preventDefault();
 
 const x = e.pageX - slider.offsetLeft;
 const walk = (x - startX); // Standard 1:1 drag speed
 slider.scrollLeft = scrollLeft - walk;
 
 // Track velocity based on cursor movement
 velocity = lastX - e.pageX;
 lastX = e.pageX;
 });

 // Prevent image links from triggering if the user was dragging
 slider.addEventListener('click', (e) => {
 // If velocity is high, it means the user was flicking/dragging, not clicking
 if (Math.abs(velocity) > 3) {
 e.preventDefault();
 e.stopPropagation();
 }
 }, true);
 });
});