HTML & CSS · Senior · Question 22 of 75

How do you build a horizontal gallery with slides that "snap" into place without JavaScript?

✓Correct answer: scroll-snap-type: x mandatory on the track, scroll-snap-align on slides
2position: sticky and left: 0 on every slide inside the track
3@keyframes with an infinite translateX animation on the track

Explanation

CSS Scroll Snap: a container with overflow-x: auto and scroll-snap-type: x mandatory, slides with scroll-snap-align. The browser settles the scroll on the nearest slide and supports touch, wheel and keyboard. scroll-padding accounts for fixed elements. JS is only needed for prev/next buttons and indicators.

How do you build a horizontal gallery with slides that "snap" into place without JavaScript?

Explanation

Further reading

Problem with a question

Test yourself