[JAVASCRIPT] 캐러셀 만들기

<div class="slide-wrap">
      <div class="slide-container">
        <div class="slide-box">
          <img src="/images/london.jpg" alt="london" />
        </div>
        <div class="slide-box">
          <img src="/images/paris.jpg" alt="paris" />
        </div>
        <div class="slide-box">
          <img src="/images/newyork.jpg" alt="newyork" />
        </div>
      </div>
    </div>

    <button class="slide-1">1</button>
    <button class="slide-2">2</button>
    <button class="slide-3">3</button>
    <button class="next">다음</button>

 

.slide-wrap {
  overflow: hidden;
  border: 1px solid red;
}
.slide-container {
  width: 300vw;
  transition: all 1s;
}
.left1 {
  transform: translateX(-100vw);
}
.left2 {
  transform: translateX(-200vw);
}
.left3 {
  transform: translateX(0vw);
}
.slide-box {
  width: 100vw;
  float: left;
  border: 1px solid blue;
}

.slide-box img {
  width: 100%;
  height: 100vh;

1. 숫자버튼 누르면 그 숫자의 이미지로 이동하기

document.querySelector(".slide-2").addEventListener("click", function () {
	document.querySelector(".slide-container").classList.add("left1");
});
document.querySelector(".slide-3").addEventListener("click", function () {
	document.querySelector(".slide-container").classList.add("left2");
});
document.querySelector(".slide-1").addEventListener("click", function () {
	document.querySelector(".slide-container").classList.add("left3");
});

2. 다음버튼 누르면 옆으로 이동하기

지금 보이는 사진이 1인지 2인지 판단하려면 변수만들면 됨

 let now = 1;
  document.querySelector(".next").addEventListener("click", function () {
    if (now == 1) {
      document.querySelector(".slide-container").classList.add("left1");
      now++;
    } else if (now == 2) {
      document.querySelector(".slide-container").classList.add("left2");
      now++;
    }
 });