Верстка · Senior · Запитання 22 з 75
Як реалізувати горизонтальну галерею з «защіпанням» слайдів без JavaScript?
- ✓Правильна відповідь:
scroll-snap-type: x mandatoryу стрічки,scroll-snap-alignу слайдів - 2
position: stickyіleft: 0у кожного слайда всередині стрічки - 3
@keyframesз нескінченною анімацієюtranslateXу стрічки
Пояснення
CSS Scroll Snap: контейнер з overflow-x: auto і scroll-snap-type: x mandatory, у слайдів - scroll-snap-align. Браузер сам доводить прокручування до найближчого слайда, підтримує тач, коліщатко й клавіатуру. scroll-padding враховує фіксовані елементи. JS потрібен лише для кнопок «вперед/назад» та індикаторів.