🎠 Карусель с CSS без JavaScript
CSS Scroll Snap позволяет автоматически фиксировать прокрутку на ближайшей карточке.
Настраиваем горизонтальный контейнер:
.slider {
display: flex;
gap: 16px;
overflow-x: auto;
scroll-snap-type: x mandatory;
}
Затем указываем точку фиксации для каждой карточки:
.slide {
flex: 0 0 80%;
scroll-snap-align: start;
}
Теперь после прокрутки ближайшая карточка сама выровняется по началу контейнера.
Для более плавного поведения можно добавить:
.slider {
scroll-behavior: smooth;
}
Подходит для мобильных подборок, галерей, отзывов и карточек товаров.

#css #frontend #вебразработка