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)";
}
}
}});
'문제해결' 카테고리의 다른 글
| 안드로드이드 스튜디오로 개발 중, 앱목록에 내 앱이 보이지 않을때 (0) | 2025.08.05 |
|---|