Muscardinus

Carousel 본문

FrontEnd/Basic Skills

Carousel

Muscardinus 2022. 3. 20. 22:16
728x90
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet" />
    <link rel="stylesheet" href="./styles.css" />
    <title>Carousel Slider</title>
  </head>
  <body>
    <label for="overflow">carousel <b>overflow: hidden</b></label>
    <input type="checkbox" id="overflow" checked />

    <h1 class="title">Carousel Slider</h1>
    <div class="carousel">
      <!-- <div class="carousel-slides">
        <img src="assets/movies/movie-4.jpg">
        <img src="assets/movies/movie-1.jpg">
        <img src="assets/movies/movie-2.jpg">
        <img src="assets/movies/movie-3.jpg">
        <img src="assets/movies/movie-4.jpg">
        <img src="assets/movies/movie-1.jpg">
      </div>
      <button class="carousel-control prev">&laquo;</button>
      <button class="carousel-control next">&raquo;</button> -->
    </div>
    <script type="module" src="./src/app.js"></script>
  </body>
</html>
const carousel = ($container, images) => {
  // Write JS Code Here!
  let currentSlide = 0;
  let isMoving = false;
  const DURATION = 500;
  const timerId = null;
  let $carouselSlides = null;

  const move = (currentSlide, duration = 0) => {
    if (duration) isMoving = true;
    $carouselSlides.style.setProperty("--duration", duration);
    $carouselSlides.style.setProperty("--currentSlide", currentSlide);
  }

  document.addEventListener("DOMContentLoaded", () => {
    $container.innerHTML = `
      <div class="carousel-slides">
        ${[images[images.length - 1], ...images, images[0]].map(url => `<img src='${url}'/>`).join("")}
      </div>
      <button class="carousel-control prev">&laquo;</button>
      <button class="carousel-control next">&raquo;</button>
    `;
    $carouselSlides = document.querySelector(".carousel-slides");
  });

  window.onload = () => {
    const { offsetWidth } = $carouselSlides.querySelector("img");
    $container.style.width = `${offsetWidth}px`;
    move(++currentSlide);
    $container.style.opacity = 1;
  }

  $container.onclick = ({ target }) => {
    if (!target.classList.contains("carousel-control") || isMoving) return;
    const delta = target.classList.contains("prev") ? -1 : 1;
    currentSlide += 1 * delta;
    move(currentSlide, DURATION);
  }

  $container.ontransitionend = () => {
    isMoving = false;
    const delta = currentSlide === 0 ? 1 : currentSlide === images.length + 1 ? -1 : 0;
    if (!delta) return;
    currentSlide += images.length * delta;
    move(currentSlide);
  }
};

carousel(document.querySelector('.carousel'), [
  'movies/movie-1.jpg',
  'movies/movie-2.jpg',
  'movies/movie-3.jpg',
  'movies/movie-4.jpg'
]);
728x90

'FrontEnd > Basic Skills' 카테고리의 다른 글

Instant Search  (0) 2022.03.21
Tabs  (0) 2022.03.21
Toggle Button  (0) 2022.03.20
Chips UI  (0) 2022.03.20
Progress Bar  (0) 2022.03.20
'FrontEnd/Basic Skills' Related Articles more
Comments