Как делается такой слайдер?

Question

Есть следующий слайдер, который можно зажимать курсором и передвигать машкой влево/вправо.

Как делаются такие слайдеры? Не могу понять, в какую сторону копать.

Answer 1

Подход с тасканием может быть следующим:

сохранять точку, где зацепились для начала перетягивания
отслеживать движение мыши рассчитывая на сколько нужно изменить положение
при отпускании кнопки мыши прекратить отслеживание движения

Пример:

let mouseCoordX = undefined;
let itemsShift = 0;

const sliderElem = document.querySelector('.slider');
const itemsElem = sliderElem.querySelector('.items');
itemsElem.addEventListener('mousedown', (e) => {
  itemsElem.style.cursor = 'grabbing'; // меняем курсор

  mouseCoordX = e.screenX; // сохраняем место куда кликнули
  window.addEventListener('mousemove', onDrag); // начинаем отслеживать перемещение мышки
});

window.addEventListener('mouseup', (e) => {
  itemsElem.style.cursor = ''; // меняем курсор обратно

  mouseCoord = undefined;
  itemsShift = itemsShift + e.screenX - mouseCoordX; // запоминаем текущее смещение
  window.removeEventListener('mousemove', onDrag); // прекращаем отслеживать перемещение мышки
});

itemsElem.addEventListener('dragstart', (e) => {
  e.preventDefault();
  e.stopPropagation()
}, false);

function onDrag(e) {
  itemsElem.style.transform = `translateX(${ // вычисляем смещение после движения мышки
    clamp(itemsShift + e.screenX - mouseCoordX, // новое значение
    sliderElem.offsetWidth - itemsElem.scrollWidth, // максимальное смещение вправо
    0)}px)`; // максимальное смещение влево
}

function clamp(value, min, max) { // функция гарантирующая что значение будет в заданном интервале.
  if (value < min) return min;
  if (value > max) return max;
  return value;
}

.slider {
  width: 600px;
  border: 1px solid black;
  overflow: hidden;
}

.items {
  display: flex;
  gap: 6px;
  cursor: grab;
}

<div class="slider">
  <div class="items">
    <div class="item">
      <img src="https://placehold.co/200x400" />
    </div>
    <div class="item">
      <img src="https://placehold.co/200x400" />
    </div>
    <div class="item">
      <img src="https://placehold.co/200x400" />
    </div>
    <div class="item">
      <img src="https://placehold.co/200x400" />
    </div>
    <div class="item">
      <img src="https://placehold.co/200x400" />
    </div>
    <div class="item">
      <img src="https://placehold.co/200x400" />
    </div>
  </div>
</div>

БЛОГ НА HUSL

Как делается такой слайдер?

Ответы (1 шт):