안녕하세요 스와이퍼 응용질문이요

[최문길]

HTML-----------------------------
    <div style="overflow: hidden">
        <div class="slide-container">
          <div class="slide-box">
            < img src="16-level-03-캐래셀 이미지/car1.png" draggable="false">
          </div>
          <div class="slide-box">
            < img src="16-level-03-캐래셀 이미지/car2.png" draggable="false">
          </div>
          <div class="slide-box">
            < img src="16-level-03-캐래셀 이미지/car3.png" draggable="false">
          </div>
        </div>
    </div> 
---------- CSS
        img {
            vertical-align: top;
            width: 100%;
            height: 100%;
        }
        .container-box {
            overflow: hidden;
        }
        .slide-container {
            width: 300vw;
            /* transition: all 1s; */
        }
        .slide-box {
            width: 100vw;
            float: left;
        }
-------------JAVASCRIPT

  let box = document.querySelectorAll(".slide-box");
       let container = document.querySelector(".slide-container");
       let isPress = false;
       let mousePress = 0;
       let 거리 = 0;
     

       box.forEach((item,idx)=> {
            item.addEventListener("mousedown",(e)=> {
                isPress = true;
                mousePress = e.clientX
            })
            item.addEventListener("mousemove",(e)=> {
                if(isPress == true) {
                    거리 = e.clientX - mousePress;
                        container.style.transform = `translateX(${거리 - (innerWidth * idx)}px)`;
                }
            })
            item.addEventListener("mouseup",(e)=> {
                isPress = false;
                container.style.cssText = 'transition:all .5s'
                moveSlide(거리,idx,box,container);
                setTimeout(()=> {
                container.style.cssText += 'transition : none;'
            }, 500)
            })
       })

       function moveSlide(거리,인덱스,길이,movingContainer) {
            let width = 거리;
            let index = 인덱스;
            let length = 길이.length;
            let moved = 100;

            if(width < -moved) { // 오른쪽 넘길 때

                if(length - 1 == index) { // 마지막 슬라이드에서
                    movingContainer.style.transform = `translateX(${-(index) * moved}vw)`
                } else {// 마지막이 아닌 오른쪽으로 넘길 때
                    movingContainer.style.transform = `translateX(${-(index + 1) * moved}vw)`
                }

            } else if(width > moved) { // 왼쪽으로 넘길 때

                if(index == 0) { // 처음 슬라이드에서
                    movingContainer.style.transform = `translateX(${(index) * moved}vw)`

                    } else {// 처음 슬라이드가 아닌 경우
                        
                        if(length - 1 == index ) {// 마지막 슬라이드에서 
                            console.log('check')
                            movingContainer.style.transform = `translateX(${-(index-1) * moved}vw)`
                        } else {// 처음과 마지막이 아닌 슬라이드에서 왼쪽으로 넘길 때
                            movingContainer.style.transform = `translateX(${(index-1) * moved}vw)`
                    }

            }
       } else {// moved(100)초과 또는 미만이면 그대로 있게 하기 
        movingContainer.style.transform = `translateX(${-(index) * moved}vw)`
       }
    }

작동은 잘되는것 확인 했구요
이렇게 함수로 구현을 해봤는데 많이 복잡해보여서 혹시 수정 할 것이나, 
조금더 줄이거나 할 수 있는 '팁'이나 '방향성'있다면 
알려주시면 감사하겠습니다.

[codingapple]

줄일수있는건 없어보입니다
보통 함수 파라미터를 다시 변수에 저장해서 쓰진 않습니다

[글쓴이]

글