Как сверстать слайдер на чистом CSS с переключением карточек по кнопке или автоматически

Что проверяют

Знаете ли вы, какое состояние умеет хранить CSS без скриптов, и понимаете ли, где чистый CSS заканчивается. Следом обычно спрашивают, как совместить ручное и автоматическое переключение и что делать с доступностью автопрокрутки.

Как отвечать

Сначала назовите ограничение: у CSS нет своей переменной «текущий слайд», поэтому состояние берут у HTML. Рабочих вариантов три:

• радиокнопки: визуально скрытые input type=radio с общим name, а label в роли кнопок. Правило вида #s2:checked ~ .track { transform: translateX(-100%) } сдвигает ленту, transition на transform даёт анимацию. Стрелки «вперёд» и «назад» это свои label для каждого слайда, видимые по состоянию;
• scroll-snap: лента с overflow-x: auto и scroll-snap-type: x mandatory, у слайдов scroll-snap-align: start, навигация ссылками на якоря, плавность через scroll-behavior: smooth. Бонусом работает свайп на тачскрине;
• :target: переключение по якорю в адресе. Просто, но пишет в историю браузера и может прокрутить страницу к элементу.

Автопрокрутка делается через @keyframes, анимирующий transform ленты: на каждый слайд пара ключевых кадров, пауза и переход. animation-play-state: paused на :hover и :focus-within ставит её на паузу.

Совместить режимы можно так: анимация идёт, пока не выбрана ни одна радиокнопка, а после выбора её отключает правило с :has(input:checked). В Chromium уже есть нативные примитивы для каруселей, псевдоэлементы ::scroll-button() и ::scroll-marker, но в остальных браузерах поддержка неполная: это прогрессивное улучшение.

Где спотыкаются

Приносят переключение на JavaScript, хотя задача прямо про чистый CSS. Если часть без скрипта не сделать, скажите это вслух, а не подключайте молча setInterval.

Не отключают автопрокрутку для prefers-reduced-motion: reduce и не дают её остановить. Движение дольше пяти секунд без возможности паузы нарушает критерий WCAG 2.2.2.

Прячут радиокнопки через display: none, и слайдер перестаёт управляться с клавиатуры. Ещё промах: анимация и ручной transform висят на одном свойстве одного элемента, и анимация перетирает выбор.