Как сделать карусель без JavaScript

Короткий ответ

Горизонтальная прокрутка плюс «примагничивание» к слайдам. Листайте пальцем, колесом с Shift или полосой прокрутки:

<style>
  .slider { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
  .slider img { flex: 0 0 80%; width: 80%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; scroll-snap-align: center; }
</style>
 
<div class="slider">
  <img src="/media/photo-800x500.jpg" alt="Slide 1">
  <img src="/media/photo-400x250.jpg" alt="Slide 2">
  <img src="/media/photo-600x200.jpg" alt="Slide 3">
</div>

Как это работает

scroll-snap-type: x mandatory у контейнера говорит, что после прокрутки он должен остановиться на точке привязки. scroll-snap-align: center делает такой точкой центр каждого слайда. Слайды на 80% ширины оставляют краешек следующего — так видно, что дальше есть ещё.

Кнопки и точки

Ссылки на id слайдов прокручивают к нужному без скрипта. Для кнопок «вперёд» и «назад» нужен короткий скрипт с scrollBy(). В новых браузерах кнопки и точки рисуют псевдоэлементы ::scroll-button() и ::scroll-marker, но поддерживаются они пока не везде.

Частая ошибка

Карусель, которая листается сама. Пользователь не успевает прочитать слайд, а людям с трудностями внимания и с экранными дикторами она мешает. Если автопрокрутка всё же нужна, дайте кнопку паузы и останавливайте её при наведении и фокусе.