swiper 마우스 올렸을 때 슬라이드 일시정지 autoplay stop

swiper 슬라이드에 마우스를 올렸을 때 슬라이드 동작을 일시적으로 정지하고 싶은 경우

 

See the Pen swiper 2 - autoplay stop on hover by jaeheekim (@jaehee) on CodePen.

 

 

 

 

 

$('.swiper').hover(function() {
    swiper.autoplay.stop();
}, function(){
    swiper.autoplay.start();
});

 

swiper.autoplay.stop()

swiper.autoplay.start()

 

두 개 속성을 이용하여 마우스가 올려졌을 때는 슬라이드 stop() 그 외는 다시 start로 적용되게끔 한다.

 

 

 

 

이때 슬라이드 동작이 멈출 때 기준은 하나 slider 기준

하나의 슬라이드 처음과 끝이 모두 시작과 종료 상태일 때 멈춘다

 

---

 

그렇기에 슬라이드 slidesPerVIew 가 2개 이상일경우 마우스 hover 했을 때 즉각적인 멈춤은 이뤄질 수 없다.

 

 

예를 들어 한 화면에 보이는 슬라이드 위 이미지일 경우

이 슬라이드에 마우스를 올렸을 때 왼쪽 기준 실행되고 있던 슬라이드의 끝이 닿았을 때 멈추게 된다.

즉각적인 멈춤은 안됨

 

 

 

 

---

참고

https://github.com/nolimits4web/swiper/issues/3986