CSS 3 · Positioning, effects and animation
Snap to items while scrolling
Make a horizontal carousel stop at each item.
.carousel {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
}
.carousel > * {
scroll-snap-align: start;
}
More positioning, effects and animation commands
- Stick an element while scrolling
- Cover the parent
- Crop an image to fit its box
- Truncate text with an ellipsis
- Limit text to a number of lines
- Animate a change smoothly
All positioning, effects and animation commands · CSS 3 cheatsheet