Untitled

<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
  <title>Carousel</title>
  <style>
    .carouselbox {
      font-family: helvetica, sans-serif;
      font-size: 14px;
      width: 100px;
      position: relative;
      margin: 1em;
      border: 1px solid #ccc;
      box-shadow: 2px 2px 10px #ccc;
      overflow: hidden;
    }

    .content {
      margin: 0;
      padding: 0;
    }

    .content li {
      font-size: 100px;
      margin: 0;
      padding: 0;
      width: 100%;
      list-style: none;
      text-align: center;
    }

    .active {
      height: 150px;
    }

    .active li {
      position: absolute;
      /* top: 200px; */
    }

    .active li.current {
      /* top: 30px; */
    }

    .active .buttons {
      padding: 5px 0;
      background: #eee;
      text-align: center;
      z-index: 10;
      position: relative;
    }

    .carouselbox button {
      border: none;
      display: none;
    }

    .active button {
      display: block;
    }

    .offscreen {
      position: absolute;
      left: -2000px;
    }

    .active li {
      position: absolute;

      opacity: 0;
      transform: translateX(100px);
      transition: transform 1s, opacity 1s;
    }

    .active li.current {
      opacity: 1;
      transform: translateX(0);
      transition: transform 1s, opacity 1s;
    }

    .active li.prev {
      opacity: 0;
      transform: translateX(-100px);
      transition: transform 1s, opacity 1s;

    }
  </style>
</head>

<body>
  <div id="container">
    <div class="carouselbox active">
      <div class="buttons">
        <button class="prev">
          ◀ <span class="offscreen">Previous</span>
        </button>
        <button class="next">
          <span class="offscreen">Next</span> ▶
        </button>
      </div>
      <ol class="content">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
      </ol>
    </div>
  </div>
  <script>
    carousel = (function () {
      var box = document.querySelector('.carouselbox');
      var next = box.querySelector('.next');
      var prev = box.querySelector('.prev');
      var items = box.querySelectorAll('.content li');
      var counter = 0;
      var amount = items.length;
      var current = items[0];
      box.classList.add('active');
      function navigate(direction) {
        items.forEach(v => {
          v.classList.remove('prev')
          v.classList.remove('current')
        })

        counter = counter + direction;
        if (direction === -1 && counter < 0) {
          counter = amount - 1;
        }
        if (direction === 1 && !items[counter]) {
          current.classList.add('prev')
          counter = 0;
        }

        console.log(counter)
        current = items[counter];
        prev = items[counter === 0 ? items.length - 1: counter - 1];
        current.classList.add('current');
        prev.classList.add('prev');
      }
      next.addEventListener('click', function (ev) {
        navigate(1);
      });
      prev.addEventListener('click', function (ev) {
        navigate(-1);
      });
      navigate(0);
    })();
  </script>
</body>

</html>