Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
Perfect for touch scrolling
Pure CSS solution
Native browser behavior
Set snap type on scroll container
.container {
scroll-snap-type: x mandatory;
overflow-x: scroll;
}Set snap align on child items
.item {
scroll-snap-align: start;
}x mandatory - Horizontal, must snapy mandatory - Vertical, must snapx proximity - Snap if close enoughboth mandatory - Both directions<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="demo">
<h1>📸 Scroll Snap Carousel</h1>
<p class="subtitle">Swipe or scroll horizontally →</p>
<div class="carousel">
<div class="slide">
<div class="slide-number">1</div>
<div class="slide-text">Purple Gradient</div>
</div>
<div class="slide">
<div class="slide-number">2</div>
<div class="slide-text">Pink Gradient</div>
</div>
<div class="slide">
<div class="slide-number">3</div>
<div class="slide-text">Blue Gradient</div>
</div>
<div class="slide">
<div class="slide-number">4</div>
<div class="slide-text">Green Gradient</div>
</div>
<div class="slide">
<div class="slide-number">5</div>
<div class="slide-text">Yellow Gradient</div>
</div>
</div>
<div class="dots">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
</body>
</html>Loading preview...
Snap to the start edge of the item
scroll-snap-align: start;Snap to the center of the item
scroll-snap-align: center;Snap to the end edge of the item
scroll-snap-align: end;No snapping on this item
scroll-snap-align: none;Offset for snap position
scroll-padding: 20px;→ Add spacing around snapped items
Force stop at snap points
scroll-snap-stop: always;→ Prevent skipping slides
Margin around snap item
scroll-margin: 10px;→ Adjust item snap position
Image Galleries
Full-width photo carousels
Product Showcases
E-commerce product images
Testimonials
Customer review sliders
Onboarding Screens
Mobile app tutorials
Full-Page Sections
Landing page sections
Card Carousels
Horizontal card lists