바닐라js로 간단한 캐러셀 만들기

일을 하다보면 swiper.js나 slick.js같은 슬라이드 라이브러리를 가져와

서 사용하면 편하지만 라이브러리 내에서 작동되는 css나 js가 기존의 내

코드랑 충돌이 일어나는것 같아서(아직도 이유를 잘모름) 바닐라로 만들어서

사용 해보겠습니다..

HTML코드

<div class="slide-wrap">

      <div class="slide slide01">
         <h1>slide01</h1>
      </div>
      
      <div class="slide slide02">
         <h1>slide02</h1>
      </div>
      
      <div class="slide slide03">
         <h1>slide03</h1>
      </div>
      
</div>

wrap을 기준으로 slide들을 absolute로 겹치게 만들고
"active"라는 class명을 달고있을때 보여지도록 만들어줍니다

JS코드

슬라이드를 넘길 버튼2개와 카운트 될 숫자가 담긴 변수
총 세가지 변수를 만들어 줍니다.

<script>
      const btnPre = document.querySelector(".prev_btn");
      const btnNext = document.querySelector(".next_btn");
      let current = 1;

      //next
      function nextBtn() {
         let slide = document.querySelector(`.slide0${current}`);
         slide.classList.remove("active");
         current = current + 1 < 5 ? current + 1 : 1;
         slide = document.querySelector(`.slide0${current}`);
         slide.classList.add("active");
      }
      btnNext.addEventListener("click", nextBtn);

 </script>

템플릿 리터럴 방식과 삼항연산자를 이용해서

모든 슬라이드를 for문으로 뽑아내지 않고,

카운트 되는 숫자와 슬라이드 넘버를 일치시켜서

active라는 클래스명을 추가,제거 하게끔 만든 코드입니다.

감사합니다.