문제해결

Swiper Slide의 cude타입에서 한번에 슬라이드 2개씩 지나가기

Y_B_Normal 2025. 11. 18. 22:13

var swiper = new Swiper("#banner-container", {
direction: "vertical",
loop: true,
//rewind: true,
autoplay: {
delay: 4000,
pauseOnMouseEnter: true,
reverseDirection: true,
},
speed: 150,
effect: "cube",
grabCursor: true,
cubeEffect: {
shadow: false,
/*
slideShadows: true,
shadowOffset: 20,
shadowScale: 0.94,
/
},
on: {
setTranslate(swiper, translate) {
/

swiper.wrapperEl.style.transitionTimingFunction =
"cubic-bezier(0.3, 1.4, 0.5, 1)";
*/
},
slideChangeTransitionStart: function () {
// 한번 움직일때 2개 슬라이드를 이동시키기 위해
const self = this;

        // 해당 턴의 첫 번째 슬라이드라면
        if (!self._isFastJump) {
            console.log('첫 번째 이동');
            // 빠른 이동 ON
            self._isFastJump = true;

            // 첫번째 슬라이드가 빨리 지나가고 다음 슬라이드가 따라와야 자연스러우므로 autoplay 딜레이를 매우 짧게 설정
            self.params.autoplay.delay = 0;

            // 두번째 슬라이드는 비교적 천천히 움직임
            self.params.speed = 500;

            // bounce 전환 느낌을 주는 easing 초기화
            swiper.wrapperEl.style.transitionTimingFunction =
                "cubic-bezier(0.25, 0.46, 0.45, 0.94)";

        // 두 번째 슬라이드라면
        } else {
            console.log('두 번째 이동');
            // 두 번째 촤라락 이동이 끝난 뒤 다시 원래 딜레이로 복원
            self._isFastJump = false;

            // 한 세트가 끝나면 4초 대기
            self.params.autoplay.delay = 4000;

            // 다음 세트의 첫번째 슬라이드는 다시 빠르게 움직이게 함
            self.params.speed = 150;

            // bounce 전환 느낌을 주는 easing 적용
            swiper.wrapperEl.style.transitionTimingFunction =
                "cubic-bezier(0.3, 1.4, 0.5, 1)";
        }
    }
}

});