swiper 스와이퍼 만들기

좌우로 밀거나 이전,다음 버튼 클릭시 좌우로 움직인다.

완성본

HTML

<div class="swiper-wrap">        
    <div class ="swiper">
        <ul class="swiper-content">
            <li class="swiper-item">4</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">1</li>
        </ul>
    </div>
    <span class="prev">이전</span>
    <span class="next">다음</span>
</div>

전역변수

let _start;
let _index = 1;
let isActive = false;
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 ssc1 = document.querySelector(".sc");

---

1. 마우스를 눌러서 밀었을 때 좌우로 움직이게 하기위해 마우스를 누르는 좌표와
    마우스를 떼는 좌표를 설정

//마우스를 누르는 시작위치
_swiper.addEventListener("mousedown",function (e) {
    _start = e.clientX;
});
//마우스를 떼는 끝 위치
_swiper.addEventListener("mouseup",function(e){
    //1초가 지나야 이벤트를 실행할수 있도록 설정
    if(isActive ==false){ 
        isActive =true;
    let b = document.querySelector(".swiper-content");
    
    if(e.clientX -_start <-100){
        _swiperContent.style.transition = "1s";
      
        if(_index < (length-1 ))
            _index++;
           b.classList.remove("sc");
        swiperMove();

        if(_index == (length-1)){
            _index =1;
			// setTimeout이 없을때 뒤로 돌아가는 애니메이션이 발동되기 때문에 
          	// setTimeout안에 none으로 조절.
            setTimeout(() => {
      
                swiperMove();
                _swiperContent.style.transition = "none";

            },1000);
        }
    }
    else if(e.clientX-_start >100){
        _swiperContent.style.transition = "1s";

        if(_index >0)
            _index--;
            swiperMove();
    }
        if(_index == 0){

            _index =4;
            setTimeout(() => {

                _swiperContent.style.transition = "none";
                swiperMove();
              
           }, 1000);
        }
    setTimeout(() => {
        isActive =false;
    }, 1000);
}
 

2. 마우스를 밀거나 버튼을 눌러 움직일때 동작 함수 구현

	//getComputedStyle 은 태그를 매개변수로 전달해 적용된 스타일의 값을 가져올수 있다.
	//_swiper의 width의 값을 가져온다는 뜻
  let _swiperwidth = parseInt(getComputedStyle(_swiper).width);
  
  function swiperMove(){

        _swiperContent.style.left = -(_index * _swiperwidth )+ "px";
}
swiperMove();

3. 이전, 다음 버튼을 눌렀을 때 움직이는 기능 구현

//이전 버튼
   _prev.addEventListener("click",function(){
  
   let b= document.querySelector(".swiper-content");

   if(isActive==false)
   {   
       isActive = true;

       if(_index > 0)
       {
       _index--;
       swiperMove();
      
       _swiperContent.style.transition = "1s";}

       if(_index ==0){

           setTimeout(() => {
               
               _swiperContent.style.transition = "none";
               _index =4;
               
               swiperMove();
               
           }, 1000);
       }
       setTimeout(() => {
           isActive = false;
       }, 1000);
   }
});
//다음 버튼
_next.addEventListener("click",function(){
   
   if(isActive==false)
   {   
       isActive = true;
   if(_index < (length-1)){
   	
     	_swiperContent.style.transition = "1s";
   	_index++;
   	swiperMove();
   }

   if(_index == (length -1)){
       
       let b= document.querySelector(".swiper-content");
       _index=1;    

       setTimeout(() => {

           _swiperContent.style.transition = "none";
           swiperMove();

       }, 1000);
   }
       setTimeout(() => {
           isActive = false;
       }, 1000);
   }
});

---