[css] swiper slider 마지막 슬라이드 스크롤

    <div class="swiper slide">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
            슬라이드내용
            </div>
         </div>
         <div class="swiper-wrapper">
            <div class="swiper-slide">
            슬라이드내용
            </div>
         </div>
         <div class="swiper-wrapper">
            <div class="swiper-slide">
            슬라이드내용
            </div>
         </div>
         <div class="swiper-wrapper">
            <div class="swiper-slide">
            슬라이드내용
            </div>
         </div>
         <div class="swiper-wrapper">
            <div class="swiper-slide">
            슬라이드내용
            </div>
         </div>
        <div class="swiper-pagination"></div>
    </div>

✅html
1) swiper slider에서 html가져오기

//Initialize Swiper
var swiper = new Swiper(".slide", {
    direction: "vertical",
    sensitivity: 3,
    mousewheel: true,
    touchRatio: 2,
    // followFinger: false,
    pagination: {
        el: ".slide .swiper-pagination",
        type: "fraction",
    },
    on: {
        reachEnd: function () {
            swiper.mousewheel.disable();
        }
    }
});
// 슬라이드 가장 마지막에서 스크롤 활성화
window.addEventListener('wheel', function (event) {
    if (event.deltaY < 0) {
        swiper.mousewheel.enable();
    } else if (event.deltaY > 0) { }
});

✅css
1) swiper slider에서 script내용가져오기
2) swiper slider API에서 필요한 부분 가져오기
- mouse wheel로 작동 될 수 있게 하였다
- 스크롤, 터치에 대해 민감하게 휙휙 넘어가는 듯한 느낌을 위해 sensitivity와 touchRatio 값을 주었다
3) pagination 숫자로 보이게 추가
4) 슬라이더가 작동할 때 마우스 휠에 움직이지 않는다는 명령어를 작성

5) 휠 이벤트를 주어 if Y가 0보다 작으면 휠이 작동하지 않고 else if Y가 0보다 크면 작동한다는 함수 작성

✔ touch시 마지막 슬라이드가 움직이지 않는 현상