<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script
      src="https://kit.fontawesome.com/fbadad80a0.js"
      crossorigin="anonymous"
    ></script>
    <link rel="stylesheet" href="style.css" />
    <title>Project #10 - Gallery Carousel</title>
  </head>
  <body>
    <section id="gallery-carousel">
      <!-- Button Left -->
      <button class="btn btn-left hidden">
        <i class="fas fa-caret-left"></i>
      </button>

      <!-- Image Container -->
      <div class="img-container">
        <ul class="list">
          <li class="item current-img">
            <img src="https://cdn.pixabay.com/photo/2022/02/15/00/40/lemonade-7014122__480.jpg" alt="nature" />
          </li>

          <li class="item">
            <img src="https://cdn.pixabay.com/photo/2022/01/18/16/49/town-6947538__480.jpg" alt="nature" />
          </li>

          <li class="item">
            <img src="https://cdn.pixabay.com/photo/2021/11/03/12/28/forest-6765636__480.jpg" alt="nature" />
          </li>

          <li class="item">
            <img src="https://cdn.pixabay.com/photo/2022/04/15/14/18/python-7134564__480.jpg" alt="nature" />
          </li>

          <li class="item">
            <img src="https://cdn.pixabay.com/photo/2022/03/28/18/41/hatching-7098132__480.png" alt="nature" />
          </li>

          <li class="item">
            <img src="https://cdn.pixabay.com/photo/2018/09/23/12/33/building-3697342__480.jpg" alt="nature" />
          </li>

          <li class="item">
            <img src="https://cdn.pixabay.com/photo/2022/04/18/16/16/ship-7140939__480.jpg" alt="nature" />
          </li>

          <li class="item">
            <img src="https://cdn.pixabay.com/photo/2022/04/10/05/33/glacier-7122676__480.png" alt="nature" />
          </li>

          <li class="item">
            <img src="https://cdn.pixabay.com/photo/2022/04/15/19/54/flowers-7135053__340.jpg" alt="nature" />
          </li>

          <li class="item">
            <img src="https://cdn.pixabay.com/photo/2022/04/05/07/44/flowers-7113013__340.jpg" alt="nature" />
          </li>
        </ul>
      </div>

      <!-- Button Right -->
      <button class="btn btn-right">
        <i class="fas fa-caret-right"></i>
      </button>
    </section>

    <!-- ------------------------ -->
    <!-- JS File -->
    <script src="app.js"></script>
  </body>
</html>

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

body {
  overflow: hidden;
  height: 100vh;
  width: 100vw;
}

.list {
  position: relative;
  transition: transform 0.5s ease-in-out;
}

.item {
  position: absolute;
  top: 0;
  left: 0;
}

.item img {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
}

.btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  z-index: 1;
}

.btn-left {
  left: 10px;
}

.btn-right {
  right: 10px;
}

.btn i {
  font-size: 50px;
  color: lawngreen;
}

/* Dynamic Class */
.hidden {
  display: none;
}

let list = document.querySelector(".list");
let imgs = Array.from(list.children);
const nextBtn = document.querySelector(".btn-right");
const prevBtn = document.querySelector(".btn-left");

// 페이지에서의 사진 넓이를 반환해 페이지를 꽉태울 수 있도록 함.
const imgWidth = imgs[0].getBoundingClientRect().width;

// 이미지를 인덱스 값에 따라 일렬로 나열.
function setImgPosition(img, index) {
  img.style.left = imgWidth * index + "px";
}
imgs.forEach(setImgPosition);

// 이미지로 이동.
const moveToImg = function (list, currentImg, targetImg) {
  list.style.transform = "translateX(-" + targetImg.style.left + ")";
  currentImg.classList.remove("current-img");
  targetImg.classList.add("current-img");
};

// 화살표 숨기기
const hideShowArrows = function (imgs, prevBtn, nextBtn, targetIndex) {
  if (targetIndex === 0) {
    prevBtn.classList.add("hidden");
    nextBtn.classList.remove("hidden");
  } else if (targetIndex === imgs.length - 1) {
    prevBtn.classList.remove("hidden");
    nextBtn.classList.add("hidden");
  } else {
    prevBtn.classList.remove("hidden");
    nextBtn.classList.remove("hidden");
  }
};


nextBtn.addEventListener("click", function () {
  const currentImg = list.querySelector(".current-img");
  //공백 텍스트 제외하고 바로 다음 요소를 가져옴.
  const nextImg = currentImg.nextElementSibling;
  //다음 이미지를 배열에서 가져옴.
  const nextIndex = imgs.findIndex((img) => img === nextImg);

  moveToImg(list, currentImg, nextImg);
  hideShowArrows(imgs, prevBtn, nextBtn, nextIndex);
});

prevBtn.addEventListener("click", function () {
  const currentImg = list.querySelector(".current-img");
  const prevImg = currentImg.previousElementSibling;
  const prevIndex = imgs.findIndex((img) => img === prevImg);

  moveToImg(list, currentImg, prevImg);
  hideShowArrows(imgs, prevBtn, nextBtn, prevIndex);
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.