<div class="spacer">
<h2>Scroll Down</h2>
<p>The gallery section will pin to the top and scroll sideways.</p>
</div>
<div class="scroll-container" id="scroll-container">
<div class="sticky-view">
<div class="horizontal-track" id="scroll-track">
<div class="gallery-card">
<img src="https://placehold.co/400x500/3b82f6/ffffff?text=One" alt="Image">
</div>
<div class="gallery-card">
<img src="https://placehold.co/400x500/10b981/ffffff?text=Two" alt="Image">
</div>
<div class="gallery-card">
<img src="https://placehold.co/400x500/f59e0b/ffffff?text=Three" alt="Image">
</div>
<div class="gallery-card">
<img src="https://placehold.co/400x500/ef4444/ffffff?text=Four" alt="Image">
</div>
<div class="gallery-card">
<img src="https://placehold.co/400x500/8b5cf6/ffffff?text=Five" alt="Image">
</div>
</div>
</div>
</div>
<div class="spacer">
<h2>Keep Scrolling</h2>
<p>You have passed the horizontal section.</p>
</div>
Back to Snippets
Horizontal Scroll Gallery Section JS
Tell a better story with this horizontal scroll gallery. We made the images slide sideways as you scroll down, but it works smoothly on all screen sizes.
57