<div class="wrapper">
    <div class="slider">
      <div class="slide s1"><p>웹개발</p></div>
      <div class="slide s2"><p>Javascript</p></div>
      <div class="slide s3"><p>React</p></div>
      <div class="slide s4"><p>Vue.js</p></div>
      <div class="slide s5"><p>Node.js</p></div>
      <div class="slide s6"><p>Database</p></div>
      <div class="slide s7"><p>Git</p></div>
      <div class="slide s8"><p>일반스타트업</p></div>
      <div class="slide s9"><p>조직문화</p></div>
      <div class="slide s10"><p>기획</p></div>
    </div>
  </div>
  <button class="btn btn-left">&larr;</button>
  <button class="btn btn-right">&rarr;</button>

html, body {width: 100%; height: 100%;}
body, div, p {margin: 0; padding: 0;}

.wrapper {
  width: 600px;
  margin: 0 auto;
  height: 100%;
  position: relative;
}
.slider {
  height: 60%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
}
.slide {
  width: 100%;
  height: 20%;
  transition: transform 0.20s ease-in-out;
  display: flex;
  justify-content: center;
  align-items: center;
}

.slide b {
  position: absolute;
  font-size: 10em;
  color: black;
  opacity: 0.6;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.s1 {
  background-color: cornflowerblue;
}

.s2 {
  background-color: bisque;
}

.s3 {
  background-color: coral;
}

.s4 {
  background-color: thistle;
}

.s5 {
  background-color: blueViolet;
}

.s6 {
  background-color: darkGreen;
}
.s7 {
  background-color: aquamarine;
}
.s8 {
  background-color:yellowgreen;
}
.s9 {
  background-color:violet;
}
.s10 {
  background-color:tomato;
}

.btn {
  position: absolute;
  top: 50%;
  z-index: 10;
  border: none;
  background: crimson;
  font-family: inherit;
  color: white;
  height: 5.5rem;
  width: 5.5rem;
  font-size: 3.25rem;
  cursor: pointer;
}

.btn-left {
  left: 6%;
  transform: translate(-50%, -50%);
}

.btn-right {
  right: 6%;
  transform: translate(50%, -50%);
}

// slider
const slides = document.getElementsByClassName("slide"); //DOM의 모든 변경 사항은 querySelectors와 달리 변수에서 업데이트됩니다.
const btnLeft = document.querySelector(`.btn-left`);
const btnRight = document.querySelector(`.btn-right`);

let currentSlideIndex = 0;
let lastSlideIndex = slides.length - 1;
const heigth = document.querySelector('.slider').clientHeight;
const value = (heigth / heigth) * 100; //높이의 100%값

// 슬라이드로 이동;
function goToSlide(slideIndex) {
    [...slides].forEach((s, i) => {
        s.style.transform = `translateY(${value * (i - slideIndex)}%)`
    })
    currentSlideIndex = slideIndex;
}
goToSlide(currentSlideIndex);

// 현재 슬라이드가 첫 번째 또는 마지막 슬라이드인 경우 다음 슬라이드를 준비합니다.
function readyNextSlide() {
  // currentSlide가 마지막 슬라이드인 경우 첫 번째 슬라이드를 끝으로 이동
  if (currentSlideIndex >= lastSlideIndex - (lastSlideIndex - 1)) {
        slides[lastSlideIndex].insertAdjacentElement("afterend", slides[0]);
        currentSlideIndex -= 1; //현재 슬라이드가 마지막에서 두 번째 슬라이드 유지.
    }
    // currentSlide가 첫 번째 슬라이드인 경우 마지막 슬라이드를 처음으로 이동
    if (currentSlideIndex === 0) {
        slides[0].insertAdjacentElement("beforebegin", slides[lastSlideIndex]);
        slides[0].style.transform = `translateY(-${value}%)`;
        currentSlideIndex += 1; //현재 슬라이드가 두 번째 슬라이드 유지.
    }
}

// 최초렌더링 슬라이드를 마지막 슬라이드로 표시하도록 설정
if (currentSlideIndex === lastSlideIndex || currentSlideIndex === 0) readyNextSlide();

// 제공된 방향에 따라 모든 슬라이드를 왼쪽 또는 오른쪽으로 이동
function shiftSlides(direction) {
    direction ? currentSlideIndex-- : currentSlideIndex++;
    if (currentSlideIndex >= lastSlideIndex - (lastSlideIndex - 1) || currentSlideIndex === 0) readyNextSlide();
    goToSlide(currentSlideIndex);
}

//button click events
btnRight.addEventListener("click", () => shiftSlides(1));
btnLeft.addEventListener("click", () => shiftSlides(0));