본문 바로가기
JavaScript

[Javascript] 슬라이드 만들기

by 동복이 2023. 3. 27.

슬라이드

웹페이지에 그림을 마우스로 드래그하여 넘기거나 버튼을 눌러서 넘기거나 시간이 지나면 넘어가는 기능이 있는 슬라이드를 많이 봤을 겄이다. 그 중 많이 사용하는 swiper 라이브러리와 비슷하게 만들어보는 실습을 진행해보자.

 

 

swiper.html

<!DOCTYPE html>
<html lang="en">
  <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>Document</title>
    <style>
      .swiper-wrap {
        width: 500px;
        height: max-content;
        position: relative;
        margin: auto;
      }
      .swiper {
        width: 500px;
        height: 500px;
        position: relative;
        margin: auto;
        overflow: hidden;
      }
      .swiper-content {
        width: max-content;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        margin: 0;
        padding: 0;
        display: flex;
        list-style: none;
        transition: 1s;
      }
      .swiper-item {
        width: 500px;
        height: 100%;
        border: 1px solid;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        pointer-events: none;
      }
      .prev,
      .next {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1;
        cursor: pointer;
      }
      .prev {
        left: 5px;
      }
      .next {
        right: 5px;
      }
      .swiper-content:first-child {
        left: -500px;
      }
    </style>
  </head>
  <body>
    <div class="swiper-wrap">
      <div class="swiper">
        <ul class="swiper-content">
          <li class="swiper-item">5</li>
          <li class="swiper-item">1</li>
          <li class="swiper-item">2</li>
          <li class="swiper-item">3</li>
          <li class="swiper-item">4</li>
          <li class="swiper-item">5</li>
          <li class="swiper-item">1</li>
        </ul>
      </div>
      <span class="prev">이전</span>
      <span class="next">다음</span>
    </div>
  </body>
  <script src="./swiper.js"></script>
</html>

 

swiper.js

// 클릭의 시작 위치를 가지고 있고 끝나면 끝난 좌표와 비교를 해서 움직일 위치를 정함

let _start;
let _index = 1;

let _swiper = document.querySelector(".swiper");
let _swiperContent = document.querySelector(".swiper-content");

let { length } = document.querySelectorAll(".swiper-item");

let _prev = document.querySelector(".prev");
let _next = document.querySelector(".next");

// 적용된 스타일 값을 가져옴
let _swiperWidth = parseInt(getComputedStyle(_swiper).width);

_swiper.addEventListener("mousedown", function (e) {
  console.log(e);
  e.clientX;
  _start = e.clientX;
  console.log(_start);
});

_swiper.addEventListener("mouseup", function (e) {
  if (e.clientX + 50 < _start) {
    if (_index < length - 1) {
      _index++;
      swiperMove();
    }
  } else {
    if (_index > 0 && e.clientX - 50 > _start) {
      _index--;
      swiperMove();
    }
  }
});

// 인덱스를 기준으로 움직임
function swiperMove() {
  _swiperContent.style.left = -(_index * _swiperWidth) + "px";
  let num1 = 0 + "px";
  let num2 = -3000 + "px";
  console.log(_swiperContent.style.left);
  if (_swiperContent.style.left == num1) {
    setTimeout(() => {
      _swiperContent.style.transition = `all 0s ease 0s`;

      _swiperContent.style.left = -2500 + "px";
      _index = length - 2;
    }, 1000);
  }

  if (_swiperContent.style.left == num2) {
    setTimeout(() => {
      _swiperContent.style.transition = `all 0s ease 0s`;

      _swiperContent.style.left = -500 + "px";
      _index = 1;
      console.log(_swiperContent.style.left);
    }, 1000);
  }
  _swiperContent.style.transition = `all 1s ease 0s`;
}

_prev.addEventListener("click", function () {
  if (_index > 0) {
    _index--;
    swiperMove();
  }
});
_next.addEventListener("click", function () {
  if (_index < length - 1) {
    _index++;
    swiperMove();
  }
});

 

 

Document
  • 5
  • 1
  • 2
  • 3
  • 4
  • 5
  • 1
이전 다음

여기서하면 이상하게 한쪽으로 치우쳐서 나오는데 vscode에서는 잘됨

728x90

'JavaScript' 카테고리의 다른 글

[Javascript] 예외처리문, 재귀함수, promise 객체, asysn와 await  (0) 2023.03.30
[Javascript] 생성자 함수, 구조분해할당을 활용한 묵찌빠 게임 만들기  (0) 2023.03.29
[Javascript] 구조분해할당  (0) 2023.03.27
[Javascript] cookie를 활용한 팝업창 만들기  (0) 2023.03.27
[Javascript] localstorage를 활용한 todolist 만들기  (0) 2023.03.27

관련글

티스토리툴바