본문 바로가기

Dev/Swiper

replay 클릭 시, 스르륵 효과 없이 화면 이동

반응형
$(".replay_btn").on("click", function () {
    mainSwiper.slideTo(0, 0, false);
    scrollUp2(0);
    motionArray(this);
});

function scrollUp2() {
    TweenMax.to('body,html', 0, {scrollTop: 0, ease: Power2.easeInOut})
}

 

클릭될 때라는 예시의 코드로 보자.

replay_btn이 클릭되면 slideTo를 통해 0번째 페이지로 이동한다.

 

이 때, 함수의 각 파라미터는 slideTo(몇번째페이지로, 시간, scrollUp함수 실행하지않을거야)라는 뜻!


false를 통해 scrollUp함수를 실행하지 않은 이유는

이것 역시 올라가는 모션이 보이기 때문이고

scrollUp2라는 함수를 따로 만들어서 진행시간을 똑같이 0으로 함으로써

초기화되는것처럼 보이도록 하는 것이다.

페이지 이동 후 자동으로 모션이 실행되지 않는 오류가 발생해 모션실행함수까지 함께 호출해주면~ 끝~!

 

 

이건 slideTo 함수 까먹지 말라고 쓴거야~

$('.mainGoBtn').on('click', function() {
    swiper.slideTo(1);
})

 

반응형

'Dev > Swiper' 카테고리의 다른 글

swiper motion(without scrollMagic)  (0) 2020.11.24
Swiper 자주 사용하는 기능  (0) 2020.11.05