[Swiper] 슬라이드에 맞게 재생되는 애니메이션 바

github : https://github.com/ksoyy/LEVEL-UP/tree/main/swiper/슬라이드에%20맞게%20재생되는%20애니메이션%20바

codepen : https://codepen.io/ksoyy/pen/abYpMOG

---

animate 와 스와이프 옵션에 있는 transitionEnd 를 활용하여 만들었습니다.

 

function mainSlideAni(actEl) {
  actEl.find('.bar').animate({ width: '100%' }, 3000);
}

 

애니메이션 바에 animate 를 사용해서 스와이프 재생시간인 3000 동안 가로가 100% 되도록 설정했습니다.

애니메이션 바가 중복으로 생기는걸 방지하기 위해 슬라이드가 전환될때마다 애니메이션 바를 지우고 다시 만들었습니다.

 

 

 

 

DEMO

 

See the Pen Untitled by kim so yeon (@ksoyy) on CodePen.