swiper autoplay progressbar 간단한 방법

슬라이드가 바뀔 때 마다 progressbar가 멈추고 새로 시작하도록한다.

swiperMain.on('slideChange', function)이 핵심인데, 

 

var swiper = new Swiper("", {

    on: {

    slideChange: function(){}

 }

})

 

이렇게 스와이퍼 선언할 때 한꺼번에 안에 넣어도 상관은없다. 

개인적으로는 복잡해서 따로 넣는걸 선호하는 편..

See the Pen Untitled by yeaseula (@yeaseula) on CodePen.

 

임의로 슬라이드를 넘겨도 progressbar는 처음부터 다시 동작을 시행한다.

 

중간에 offset을 집어넣은 이유는..

removeClass, addClass가 반복적으로 적용되긴하지만 

결과적으로 보면 'animation 클래스를 지운다'는 결과로 변동이 없기때문에 이를 인식하지 못한다. 

그래서 offset을 측정해서 변동있음을 알리기 위해 집어넣었다.