ImagesLesson 64Free preview
Scrollable Image Gallery
This lesson is part of How To · All levels
Summary
Scrollable image gallery displays images in a single horizontal row that can be moved. overflow-x: auto only appears when the content exceeds the width of the container. Scroll snaps make the image stop in a neat position, so the gallery feels like a simple carousel.
Key points
- Overflow-x: auto allows horizontal rolling when the content is too wide.
- Flex: 0 0 240px prevents the image from shrinking and sets a fixed width.
- Scroll-snap-type and scroll-snap-align make the stop position more precise.
- Scroll-behavior: smooth provides smooth animation when the navigation button is used.
- The scrollBy button can swipe through the gallery without scrollbars.
Full lesson
Code examples and quizzes
Full lessons, code examples, and quizzes are available to subscribers. 5 questions.