<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Project #25 - Horizontal Gallery Scroller</title>
  </head>
  <body>
    <div class="container">
      <!-- img*15[src="img/$.jpg"][class="item-$ item"][alt="img"] -->
      <img src="https://cdn.pixabay.com/photo/2020/02/25/09/57/road-4878453_960_720.jpg" alt="img" class="item-1 item" />
      <img src="https://cdn.pixabay.com/photo/2021/08/25/05/01/boat-6572384_960_720.jpg" alt="img" class="item-2 item" />
      <img src="https://cdn.pixabay.com/photo/2021/11/16/17/29/fashion-6801626_960_720.jpg" alt="img" class="item-3 item" />
      <img src="https://cdn.pixabay.com/photo/2021/12/28/11/37/castle-6899042_960_720.jpg" alt="img" class="item-4 item" />
      <img src="https://cdn.pixabay.com/photo/2022/05/04/09/13/bordeaux-7173548_960_720.jpg" alt="img" class="item-5 item" />
      <img src="https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823_960_720.jpg" alt="img" class="item-6 item" />
      <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg" alt="img" class="item-7 item" />
      <img src="https://cdn.pixabay.com/photo/2022/05/01/05/00/pelican-7166748_960_720.jpg" alt="img" class="item-8 item" />
      <img src="https://cdn.pixabay.com/photo/2022/05/04/02/29/calligraphy-7173006_960_720.jpg" alt="img" class="item-9 item" />
      <img src="https://cdn.pixabay.com/photo/2022/04/21/19/42/birds-7148194_960_720.jpg" alt="img" class="item-10 item" />
      <img src="https://cdn.pixabay.com/photo/2022/01/27/22/57/skateboarding-6973365_960_720.jpg" alt="img" class="item-11 item" />
      <img src="https://cdn.pixabay.com/photo/2022/02/23/05/10/tiramisu-7030032_960_720.jpg" alt="img" class="item-12 item" />
      <img src="https://cdn.pixabay.com/photo/2016/03/27/21/59/bread-1284438_960_720.jpg" alt="img" class="item-13 item" />
      <img src="https://cdn.pixabay.com/photo/2016/07/28/08/50/sunbeams-1547273_960_720.jpg" alt="img" class="item-14 item" />
      <img src="https://cdn.pixabay.com/photo/2022/03/02/18/07/russian-borzoi-7043714_960_720.jpg" alt="img" class="item-15 item" />
    </div>
    <!-- ------------------------- -->
    <!-- JS File -->
    <script src="app.js"></script>
  </body>
</html>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(226, 214, 43);
}

.container {
  height: 700px;
  width: 1400px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  white-space: nowrap;
  user-select: none;
  font-size: 0;
  border: 2px white solid;
}

.container.active {
  /* https://developer.mozilla.org/en-US/docs/Web/CSS/cursor */
  cursor: grabbing;
}

.item {
  width: 700px;
  height: 100%;
  object-fit: cover;
}

const slider = document.querySelector(".container");
let isDown = false;
let startx;
let scrollToLeft;

slider.addEventListener("mousedown", function (e) {
  isDown = true;
  slider.classList.add("active");

  // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetLeft
  //시작점을 알기 위해 전체 x 에서 갤러리의 왼쪽 시작 점을 뺀다. 그러면 슬라이드의 시작점이 첫번째 이미지가 된다.
  startx = e.pageX - slider.offsetLeft;
  // https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft
  scrollToLeft = slider.scrollLeft;
});

//마우스가 단순 올려져 있거나 밖에 있으면 active 클래스를 제거함으로서 커서 모양을 바꾼다.
slider.addEventListener("mouseup", function () {
  isDown = false;
  slider.classList.remove("active");
});

slider.addEventListener("mouseleave", function () {
  isDown = false;
  slider.classList.remove("active");
});

slider.addEventListener("mousemove", function (e) {
  if (!isDown) return;
  e.preventDefault();

  //사용자가 얼마나 움직였는지
  const distanceX = e.pageX - slider.offsetLeft;
  const walk = distanceX - startx;
  slider.scrollLeft = scrollToLeft - walk;
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.