바닐라 자바스크립트로 슬라이드 만들기

pagination과 좌우 버튼까지 작동하는 슬라이드를 만들어 보겠습니다.

우선 slide에 active라는 클래스가 추가되는 slide가 보여지게 해서 슬라이드를 만들어 보겠습니다.

html

<div class="modal-inner">
  <div class="prev-btn slide_btn">이전</div>
  <div class="next-btn slide_btn">다음</div>

  <div class="slide slide1 active">
            <h1>slide01</h1>
  </div>
  <div class="slide slide2">
            <h1>slide02</h1>
  </div>
  <div class="slide slide3">
            <h1>slide03</h1>
  </div>

  <div class="pagination"></div>
</div>

css

        body {
            width: 100%;
            height: 100vh;
            background: tomato;
        }

        .modal-inner {
            width: 100%;
            height: 100%;
            position: relative;
            overflow: hidden;
        }

        .prev-btn {
            position: fixed;
            left: 5%;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            z-index: 9999;
        }

        .next-btn {
            position: fixed;
            right: 5%;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            z-index: 9999;
        }

        .slide {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            visibility: hidden;
            transition: 1s;
        }

        .slide1 {
            background: red;
        }

        .slide2 {
            background: blue;
        }

        .slide3 {
            background: yellow;
        }

        .slide.active {
            opacity: 1;
            visibility: visible;
        }

        .pagination {
            position: fixed;
            left: 50%;
            transform: translateX(-50%);
            bottom: 5%;
            display: flex;
            justify-content: center;
            gap: 30px;
        }

        .pagination:after {
            content: '';
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: calc(100% - 20px);
            height: 3px;
            background: #fff;
            z-index: -1;
        }

        .pagi {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            cursor: pointer;
            background: #fff;
            opacity: 0.5;
            outline: none;
            border: none;
        }

        .pagi.active {
            opacity: 1;
            transform: scale(1.2);
            background: #FFA621;
        }
          

우선 prev와 next의 기능을 만들기 위한 함수를 먼저 작성하고

javascript

//기본셋팅
let current = 1;
const prevBtn = document.querySelector('.prev-btn');
const nextBtn = document.querySelector('.next-btn');
const slides = document.querySelectorAll('.slide');

//호출
 prevBtn.addEventListener('click', prevSlide);
nextBtn.addEventListener('click', nextSlide);

//prev
function prevSlide() {
  disableBtn()
  let target = document.querySelector(`.slide${current}`);
  target.classList.remove("active");
  current = current - 1 > 0 ? current - 1 : slides.length;
  target = document.querySelector(`.slide${current}`);
  target.classList.add("active");
  activePagination()
  console.log(current)

}

//next
function nextSlide() {
  disableBtn()
  let target = document.querySelector(`.slide${current}`);
  target.classList.remove("active");
  current = current < slides.length ? current + 1 : 1;
  target = document.querySelector(`.slide${current}`);
  target.classList.add("active");
  activePagination()
  console.log(current)
}

함수를 호출하면,
current라는 변수를 만들어 이것을 슬라이드 진행단계의 기준으로 정하고 target이라는 변수를 슬라이드로 지정해서 만들어 target이 될 슬라이드의 변수 current의 값이 삼항연산자를 통해 유동적으로 바뀌게 한 코드입니다.

그런데 next버튼을 누르게되면 슬라이드가 빠르게 넘어가는것을 방지하기 위해 함수를 하나 더 만들어봤습니다.

function disableBtn() {
  slideBtns.forEach(btn => {
    btn.style.pointerEvents = 'none';
    setTimeout(function () {
      btn.style.pointerEvents = 'auto';
    }, 500)
  })
}

슬라이드가 넘어가는 시간이 0.5초의 텀을 가지고 작동합니다.

이제 pagination버튼이 만든 슬라이드 수 만큼 html에 추가되는 코드를 작성해보겠습니다.

// pagination add html
const pagination = document.querySelector('.pagination');
slides.forEach((el, idx) => {
  const addPagiEl = document.createElement('button');
  addPagiEl.innerHTML = ``;
  addPagiEl.classList = `pagi pagi${idx + 1}`
  pagination.append(addPagiEl)
})

이제 pagination 버튼을 클릭하면 누른 pagination버튼의 슬라이드가 보여지는 코드를 작성하겠습니다.

//pagination Nav
const pagiBtns = document.querySelectorAll('.pagi');
pagiBtns[0].classList.add('active');
pagiBtns.forEach((dots, idx) => {
  dots.addEventListener('click', function () {
    for (removeSlide of slides)
      removeSlide.classList.remove('active');
    slides[idx].classList.add('active');
    // current값 재할당
    current = idx + 1;
    activePagination()
  })
})

버튼을 누른 index값을 통해서 쉽게 누른 슬라이드로 이동할 수 있게됩니다. 하지만, prev,next함수를 통해서 슬라이드를 이동했다가 pagination버튼으로 슬라이드를 이동하게되면 current의 값도 같이 바뀌는것이 아니기때문에 current값을 재할당해줘야 합니다.

자 이제 마지막으로 현재 활성화 되어있는 슬라이드에 맞춰서
pagination버튼도 활성화 되어있다는 ui를 입혀야합니다.

function activePagination() {
  for (pagiNavs of pagiBtns)
    pagiNavs.classList.remove('active');
  pagiBtns[current - 1].classList.add('active');
}

이렇게 바닐라자바스크립트로 만들어보았습니다.
최대한 코드를 간결화해서 만든다고 해서 만들어본것인데 아무래도 완성도가 있는 슬라이드는 아니기에..

결론은 swiper 슬라이드를 사용하자!