Коротко: красивый слайдер на CSS собирают тремя способами: на scroll-snap с горизонтальной прокруткой, на @keyframes с автопрокруткой и на переключателях :checked с радио-кнопками. Плавность дают transition и transform.
Три подхода
| Способ | Особенность |
|---|---|
scroll-snap |
свайп и прокрутка, как в приложениях |
@keyframes |
автоматическая смена кадров |
:checked |
ручное переключение кнопками |
Слайдер на scroll-snap
Самый удобный вариант для галерей: контейнер прокручивается по горизонтали, а снимок «прилипает» к кадру.
.slider {
display: flex;
gap: 16px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
}
.slide {
flex: 0 0 100%;
scroll-snap-align: center;
}Анимация автопрокрутки
.track {
display: flex;
animation: slide 12s infinite;
}
@keyframes slide {
0%, 30% { transform: translateX(0); }
33%, 63% { transform: translateX(-100%); }
66%, 96% { transform: translateX(-200%); }
100% { transform: translateX(0); }
}Ключевые кадры задают паузы: кадр показывается несколько секунд, затем лента сдвигается на ширину слайда. Двигают именно transform — это быстрее и плавнее, чем left.
Вкладки: примеры настройки
.slide { opacity: 0; transition: opacity .6s; }
.slide.active { opacity: 1; }Эффект затухания вместо сдвига. Кадры накладываются друг на друга через position: absolute, плавно меняется прозрачность.
.dot:checked + span {
background: #003F8F;
transform: scale(1.2);
}Точки навигации на радио-кнопках: активная подсвечивается. Клик по точке переключает кадр без скриптов.
@media (max-width: 768px) {
.slide { flex: 0 0 100%; }
}
@media (min-width: 769px) {
.slide { flex: 0 0 33.33%; }
}На мобильном — один кадр во всю ширину, на десктопе — три. Так галерея выглядит уместно на любом экране.
.track:hover { animation-play-state: paused; }. И не запускайте тяжёлую анимацию сразу для больших фото — это бьёт по мобильным.Практика: собрать слайдер
- Решите, нужен свайп, автопрокрутка или кнопки.
- Разметьте контейнер и кадры.
- Задайте гибкую ленту через
display: flex. - Настройте прокрутку или анимацию.
- Добавьте индикаторы-точки.
- Проверьте на мобильном и включите паузу при наведении.
Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Кадры сжимаются | нет flex-shrink |
flex: 0 0 100% |
| Прокрутка без «прилипания» | нет scroll-snap |
задать тип и выравнивание |
| Анимация дёргается | анимируется left |
анимировать transform |
| Точки не переключают | label не связан |
проверить for и id |
| Слайдер выходит за экран | фиксированная ширина | использовать проценты |
Проверьте себя
Вопросы и ответы
Да. Свайп-галерея работает на scroll-snap, автопрокрутка — на @keyframes, переключение стрелками — на радио и :checked. Скрипт нужен только для сложной логики.
У изображений не задан размер, поэтому страница перестраивается после их загрузки. Задайте высоту контейнеру и соотношение сторон картинкам.
Свойством animation-play-state: paused на :hover у ленты. Пользователь сможет спокойно рассмотреть кадр.
3–5. Больше не удерживает внимание, а автопрокрутка становится долгой. Важные кадры лучше вынести на статичные блоки, а не прятать в ленту.
Итоги
- Слайдер собирают на
scroll-snap,@keyframesили:checked. - Двигать нужно
transform— это плавнее. - Кадрам задают
flex: 0 0 100%, чтобы не сжимались. - Автопрокрутку ставят на паузу при наведении.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.