HTML i CSS · Senior · Pytanie 22 z 75
Jak zbudować poziomą galerię ze slajdami, które „zatrzaskują się” na miejscu bez JavaScriptu?
- ✓Poprawna odpowiedź:
scroll-snap-type: x mandatoryna torze,scroll-snap-alignna slajdach - 2
position: stickyileft: 0na każdym slajdzie wewnątrz toru - 3
@keyframesz nieskończoną animacjątranslateXna torze
Wyjaśnienie
CSS Scroll Snap: kontener z overflow-x: auto i scroll-snap-type: x mandatory, slajdy z scroll-snap-align. Przeglądarka dosuwa przewijanie do najbliższego slajdu i obsługuje dotyk, kółko i klawiaturę. scroll-padding uwzględnia elementy przypięte. JS potrzebny jest tylko do przycisków poprzedni/następny i wskaźników.