김상범

기록하는 습관을 갖자

포스팅 하는 이유


웹페이지 개발을 하다 보니 스와이프 라이브러리를 써야 하는 경우가 자주 생긴다
사용법도 쉽고 문서도 정리가 잘되어있는 Swiper 을 사용하고 있는데 이게 페이지가 여러 개로
나누어져 있을 때 스와이프가아닌 클릭을 여러 번 하면 넘어가는 경우가 생긴다.
이유는 다중클릭시 마우스가 흔들리면서 넘기는 현상이다

문서에는 shortSwipes , longSwipes 를 true 아니면 false 로 설정하면 되지만
shortSwipes 을 설정하면 스와이프 시 너무 많이 드래그를 해야한다.

📌 해결

⚠이 방법이 정답이 아닐 수 있습니다.

더 정확한 답을 알고 있으면 말씀해주세요.⚠

    new Swiper('.swiper-container', {
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
        longSwipes:true, //긴 스와이프 활성화
        longSwipesRatio:0.05, // 길게 스와이프 하는동안 최소 지속시간
        longSwipesMs:1, //긴 스와이프 트리거 비율
        spaceBetween: 100,
        shortSwipes:false, // 짧은 스와이프 비활성화
    });

마치며

정확한 방법이 아닐 수 있지만 제가 사용하기에는 지금까지 일어났던 문제점을 해결해서 포스팅하게 되었습니다~! 도움이 됐으면 하지만 물론 제가 까먹지 않기 위해 작성합니다~!

참고