Карусель-слайдер

Scroll-snap карусель с перетаскиванием мышью — как лента ExperienceHighlights у Joby. Ноль библиотек.

Тяните карточки мышью.

01 · кабина 02 · маршрут 03 · вид сверху 04 · посадка 05 · шум воды

Тяните мышью или крутите: карточки прилипают к центру через scroll-snap, инерция — нативная. Ноль библиотек.

Код

<div class="carousel">
  <div class="item"><img src="a.jpg"></div>
  <div class="item"><img src="b.jpg"></div>
  <div class="item"><img src="c.jpg"></div>
</div>

<style>
.carousel { display: flex; gap: 16px; overflow-x: auto;
  scroll-snap-type: x mandatory; padding: 10px 8vw;
  cursor: grab; scrollbar-width: none; }
.carousel::-webkit-scrollbar { display: none; }
.carousel .item { flex: 0 0 min(440px, 78%);
  scroll-snap-align: center; border-radius: 20px; overflow: hidden; }
.carousel.dragging { cursor: grabbing; scroll-snap-type: none; }
</style>

<script>
var car = document.querySelector(".carousel");
var down = false, sx = 0, sl = 0;
car.addEventListener("pointerdown", function (e) {
  down = true; sx = e.clientX; sl = car.scrollLeft;
  car.classList.add("dragging"); car.setPointerCapture(e.pointerId);
});
car.addEventListener("pointermove", function (e) {
  if (down) car.scrollLeft = sl - (e.clientX - sx);
});
["pointerup", "pointercancel"].forEach(function (ev) {
  car.addEventListener(ev, function () {
    down = false; car.classList.remove("dragging");
  });
});
</script>

Промпт для ИИ

Сделай карусель как ExperienceHighlights на jobyaviation.com: flex-контейнер с overflow-x:auto и scroll-snap-type:x mandatory; карточки flex:0 0 min(440px,78%) со scroll-snap-align:center; скроллбар спрятан. Перетаскивание мышью: на pointerdown запоминаем scrollLeft и clientX, на pointermove тянем scrollLeft, на время драга класс dragging (cursor:grabbing и scroll-snap-type:none, чтобы снап не мешал). Если на сайте есть Lenis — контейнеру data-lenis-prevent.