캐러셀에 스와이프 기능 만들기

👏드래그(터치)해서 이미지 넘기기 기능 만들어 보잣

 

✔ 기능 1.

내가 드래그 한 거리만큼 박스도 왼쪽으로 움직여야 함

내가 50px만큼 드래그했으면 이미지박스도 50px 움직여야 함

so 내가 얼만큼 드래그 했는지 알아야함

 

 

알아야할 이벤트

mousedown - 마우스 버튼 누를 때 발생하는 이벤트 = touchstart

mouseup - 마우스 버튼 뗄 때 = touchend

mousemove - 마우스 움직였을 때 = touchmove

 

e.clientX - 지금 마우스 있는 x 좌표

*왼쪽으로 갈수록 0에 가까워짐, 오른쪽으로 갈수록 증가

ex) 현재 mousedown한 x 좌표는?

 $('.slide-box').eq(0).on('mousedown',function(e){
        console.log(e.clientX);
});

 

//캐러셀 스와이프
        $('.slide-box').eq(0).on('mousedown',function(e){
        console.log(e.clientX);//현재 마우스 클릭한 곳 X좌표
       })


       
        var 시작좌표 = 0; //function안에있는 변수는 탈출 못해서 밖에 만들어줘야함
        var 눌렀다 = false;

       $('.slide-box').eq(0).on('mousedown',function(e){ //시작
            시작좌표 = e.clientX; //e.clientX : 현재 마우스위치 X좌표
            눌렀다 = true; //마우스 누를때마다 true
       });

       $('.slide-box').eq(0).on('mousemove', function (e) {
        if(눌렀다==true){
            console.log(e.clientX - 시작좌표); //->이동거리 (현재마우스 위치에서 시작위치 빼면 이동거리 알수있음)
            $('.slide-container').css('transform', `translateX(${e.clientX - 시작좌표}px)`);//이미지를 드래그한만큼 x축으로 이동시켜주세요
        }
           
        });

        $('.slide-box').eq(0).on('mouseup',function(e){ 
            눌렀다 = false; //마우스 뗄때 안움직임

            console.log(e.clientX - 시작좌표);
            if(e.clientX-시작좌표 < -100){ //이동거리가 100이상이다
                $('.slide-container')
                .css('transition','all 0.5s') //넘어갈때 천천히
                .css('transform', 'translateX(-100vw)'); //2번 사진 보임
            }else{
                $('.slide-container')
                .css('transition','all 0.5s')
                .css('transform', 'translateX(0vw)'); //1번 그대로
            }

            setTimeout(()=>{
                $('slide-container')
                .css('transition','none')
            },500) //5초 후에 실행
       });

       
        //touch
        $('.slide-box').eq(0).on('touchstart',function(e){ //시작
                    시작좌표 = e.touches[0].clientX; //e.clientX : 현재 마우스위치 X좌표
                    눌렀다 = true; //마우스 누를때마다 true
            });

            $('.slide-box').eq(0).on('touchmove', function (e) {
                if(눌렀다==true){
                    console.log(e.clientX - 시작좌표); //->이동거리 (현재마우스 위치에서 시작위치 빼면 이동거리 알수있음)
                    $('.slide-container').css('transform', `translateX(${e.touches[0].clientX - 시작좌표}px)`);//이미지를 드래그한만큼 x축으로 이동시켜주세요
                }
                
                });

                $('.slide-box').eq(0).on('touchend',function(e){ 
                    눌렀다 = false; //마우스 뗄때 안움직임

                    console.log(e.changedTouches[0].clientX - 시작좌표);
                    if(e.changedTouches[0].clientX-시작좌표 < -100){ //이동거리가 100이상이다
                        $('.slide-container')
                        .css('transition','all 0.5s') //넘어갈때 천천히
                        .css('transform', 'translateX(-100vw)'); //2번 사진 보임
                    }else{
                        $('.slide-container')
                        .css('transition','all 0.5s')
                        .css('transform', 'translateX(0vw)'); //1번 그대로
                    }

                    setTimeout(()=>{
                        $('slide-container')
                        .css('transition','none')
                    },500) //5초 후에 실행
            });