캐로셀UI를 구현해보자!

👉 동작 모습

---

👉 동작 원리

• carouselUI 에 들어갈 이미지를 3장이라고 가정해보자.
• UI의 구성을 |3번이미지|1번이미지|2번이미지|3번이미지|1번이미지| 로 1번앞에 3번을, 3번뒤에 1번을 추가로 둔다.
• 초기 translate3d값을 (-485px,0,0)으로 지정하여 1번이미지가 노출되게끔 한다.
• transition을 300ms으로 하여, button이 눌릴때마다 translate3d값을 조정해준다.
• 3번에서->1번 / 1번에서->3번 무빙 시 transition이 실행되는 300ms에 맞춰 setTimeout()이 동작한다.
• 무빙 후, transtion을 없애고 다시 translate3d를 초기 좌표에 맞춘다.

---

👉 HTML구조

<div class="carouselUI"></div>

• carouselUI안에 img들이 들어갈 것이다.

---

👉 CSS 구조

.item-display {
  display: flex;
  align-items: center;
}

.carouselUI {
  @extend .item-display;
  width: 485px;
  overflow: hidden;
}

• img의 픽셀만큼 width를 설정한다.
• overflow:hidden을 통해 한장씩만 보이도록 설정한다.

---

👉 Javascript

// CarouselUI class

export default class CarouselUI {
  constructor() {
    this.carouselUI = document.querySelector(".carouselUI");
    this.imgurl1 = "http://localhost:8080/rightpannel1";
    this.imgurl2 = "http://localhost:8080/rightpannel2";
    this.imgurl3 = "http://localhost:8080/rightpannel3";
  }

  makeImageDOM(imgurl) {
    this.carouselUI.insertAdjacentHTML(
      "beforeend",
      `<div class="carouselUI--img">
                <img src="${imgurl}" />
            </div>`
    );
  }

  insertDOM() {
    fetch(this.imgurl1)
      .then(fetch(this.imgurl2))
      .then(fetch(this.imgurl3))
      .then(
        this.makeImageDOM(this.imgurl3),
        this.makeImageDOM(this.imgurl1),
        this.makeImageDOM(this.imgurl2),
        this.makeImageDOM(this.imgurl3),
        this.makeImageDOM(this.imgurl1)
      );
  }
}

//CarouselUI-Manager

import CarouselUI from "./carouselUI";

const carouselUI = new CarouselUI();
carouselUI.insertDOM();

const leftBtn = document.querySelector(".carouselUI--leftBtn");
const rightBtn = document.querySelector(".carouselUI--rightBtn");
const ui = document.querySelectorAll(".carouselUI--img");
let x = -485;
// 1번째 페이지 보이기 위한 translate3d값 설정
ui.forEach((v) => (v.style.transform = `translate3d(${x}px,0,0)`));

leftBtn.addEventListener("click", function () {
  if (x == -1455) {
    setTimeout(function () {
      x = -485;
      ui.forEach((v) => (v.style.transition = "0ms"));
      ui.forEach((v) => (v.style.transform = `translate3d(${x}px,0,0)`));
    }, 300);
  }
  x -= 485;
  ui.forEach((v) => (v.style.transition = "300ms"));
  ui.forEach((v) => (v.style.transform = `translate3d(${x}px,0,0)`));
});

rightBtn.addEventListener("click", function () {
  if (x == -485) {
    setTimeout(function () {
      x = -1455;
      ui.forEach((v) => (v.style.transition = "0ms"));
      ui.forEach((v) => (v.style.transform = `translate3d(${x}px,0,0)`));
    }, 300);
  }
  x += 485;
  ui.forEach((v) => (v.style.transition = "300ms"));
  ui.forEach((v) => (v.style.transform = `translate3d(${x}px,0,0)`));
});

---