[JavaScipt - 실습] Making a infinite loop slider

테크야끼·2021년 5월 12일

JavaScript

목록 보기

11/13

HTML + CSS

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>무한루프 슬라이더</title>
    <script src="./main.js" defer></script>
    <style>
      body {
        margin: 0;
      }
      .slide__conatiner {
        position: relative;
        height: 100vh;
        overflow: hidden;
      }

      .slide__list {
        height: 100%;
        overflow: hidden;
      }

      .slide {
        display: flex;
        justify-content: center;
        align-items: center;
        float: left;
        height: 100%;
        font-size: 120px;
        border: 1px solid black;
        box-sizing: border-box;
      }

      /* btn control */
      .slide__controler {
        position: absolute;
        top: 20%;
        left: 35%;
        z-index: 1;
      }

      .slide__controler button {
        width: 40px;
        height: 40px;
        background-color: cornflowerblue;
        color: white;
        border-radius: 50%;
        border: 1px solid cornflowerblue;
      }
    </style>
  </head>
  <body>
    <div class="slide__conatiner">
      <div class="slide__list">
        <div class="slide">I am 1</div>
        <div class="slide">I am 2</div>
        <div class="slide">I am 3</div>
        <div class="slide">I am 4</div>
      </div>
      <div class="slide__controler">
        <button class="btn__prev">prev</button>
        <button class="btn__next">next</button>
      </div>
    </div>
  </body>
</html>

JavaScript

// DOM 변수
const contanier = document.querySelector('.slide__contanier');
const list = document.querySelector('.slide__list');
const slide = document.querySelectorAll('.slide');
const nextBtn = document.querySelector('.btn__next');
const prevBtn = document.querySelector('.btn__prev');

// slide 구현 변수
const transitionTime = 200;
let currentIndex = 0;
let newIndex = slide.length + 2;
let newWidth = 100 / newIndex;

// 실행, 함수호출
setLayout();

// 복제부를 배치하고 초기값을 설정한다.
function setLayout() {
  // 복제부 영역을 더한 총 길이를 설정
  list.style.width = `${100 * newIndex}%`;
  // 복제부 추가
  //  Node.cloneNode() 메서드는 이 메서드를 호출한 Node의 복제된 Node를 반환한다
  //  text node까지 복제
  let fristclone = slide[0].cloneNode(true);
  let lastclone = slide[slide.length - 1].cloneNode(true);

  // list 마지막에 복제한 1을 붙이고
  // list 처음에 복제한 4을 붙인다.
  list.appendChild(fristclone);
  list.prepend(lastclone);

  // 복제부를 포함한 모든 슬라이드를 배열에 담고 너비값을 준다.
  const newSlide = document.querySelectorAll('.slide');

  //100%를 슬라이드 수 만큼 나눈 값
  for (value of newSlide) {
    value.style.width = `${newWidth}%`;
  }

  //복제되어 index 0 이 "4"가 된 상태라 1을 보여주기 위해
  // 슬라이드 하나만큼 이동함
  currentIndex = 1;
  list.style.transform = `translateX(-${newWidth * currentIndex}%)`;
}

// 이벤트 리스너 등록
// next btn
nextBtn.addEventListener('click', () => {
  // 트렌지션 등록
  list.style.transition = `${transitionTime}ms`;

  //클릭할때마다 인덱스가 증가
  currentIndex++;
  //   console.log(currentIndex);

  // slide 갯수보다 많이 클릭했을 때 체크
  if (currentIndex == slide.length + 1) {
    // 복제본으로 간다.
    list.style.transform = `translateX(-${newWidth * currentIndex}%)`;

    //복제본1로 간다(애니메이션 노출) -> index 1로 리셋 -> 200ms경과
    // 트랜지션 숨김 -> 1로 이동 (reset() 실행문)

    currentIndex = 1;
    // 복제본으로 가고 다시 처음으로 가는 초기화 함수.
    reset();
  } else {
    list.style.transform = `translateX(-${newWidth * currentIndex}%)`;
  }
});

// prev btn
prevBtn.addEventListener('click', () => {
  // 트랜지션 등록
  list.style.transition = `${transitionTime}ms`;
  // 인덱스 감소
  currentIndex--;
  // 인덱스가 0이하일 떄 (복제한 4에 있을 때)
  if (currentIndex <= 0) {
    list.style.transform = `translateX(-${newWidth * currentIndex}%)`;

    //복제본4로 간다(애니메이션 노출) -> index4 로 리셋 -> 200ms경과
    // 트랜지션 숨김 -> 4로 이동 (reset() 실행문)

    currentIndex = 4;
    reset();
  } else {
    list.style.transform = `translateX(-${newWidth * currentIndex}%)`;
  }
});
function reset() {
  setTimeout(() => {
    list.style.transition = `none`;
    list.style.transform = `translateX(-${newWidth * currentIndex}%)`;
  }, transitionTime);
}

테크야끼

이전 포스트

[JavaScirpt - 문법] Class (2)

다음 포스트

[JavaScipt - 실습] Making a infinite loop slider

JavaScript

HTML + CSS

JavaScript

[JavaScirpt - 문법] Class (2)

[JavaScipt - Plugin] Making a slider with Swiper

0개의 댓글