Как сделать слайдер css?

1. Соберите фотографии в общую обертку.
2. У контейнера задайте display: flex; overflow-x: auto; scroll-snap-type: x mandatory;.
3. Слайдам назначьте flex: 0 0 100%; scroll-snap-align: start;.
4. Ограничьте ширину изображений и добавьте alt.
5. Проверьте свайп и управление клавиатурой.

Это ручная прокручиваемая галерея. Автоперелистывание, счетчик и дополнительные кнопки потребуют отдельной реализации.

Для такой галереи подойдет горизонтальная прокрутка с CSS Scroll Snap. Контейнеру задайте display: flex; overflow-x: auto; scroll-snap-type: x mandatory;, а каждому слайду flex: 0 0 100%; scroll-snap-align: start;. Слайды будут занимать ширину контейнера и останавливаться на выбранных позициях после прокрутки.

Это дает простую ручную галерею без автоматического таймера. Изображения внутри ограничьте шириной слайда и предусмотрите подходящий alt. Сделайте область доступной с клавиатуры, например добавьте tabindex="0" и понятное доступное название, проверьте видимый фокус.

Для привычных кнопок вперед и назад, счетчика и сложного управления могут понадобиться дополнительные возможности CSS с проверкой поддержки либо JavaScript. Не скрывайте все признаки прокрутки, если пользователь иначе не догадается, что фотографий несколько.