swipe) 마우스 오버/아웃 시 슬라이드 멈춤/재생

슬라이드에서 autoplay(자동재생)를 적용한 경우 마우스 오버, 아웃 시 멈춤, 재생하는 이벤트 조작법

autoplay 적용

var swiper = new Swiper('.mySwiper',{
  autoplay: {
    delay: 2000,  // 2초
    disableOnInteraction: false,
  },
});

disableOnInteraction의 기본값은 true로 사용자가 슬라이드를 움직일(마우스 드래그로 슬라이드 전환) 경우 자동재생이 멈추게 되므로 이 기능은 비활성화 하는 편이 좋다.

 

마우스 오버/아웃 시 슬라이드 멈춤/재생

// JS
let $slides = document.querySelectorAll('.swiper-slide');
for(let i of $slide) {
  i.addEventListener('mouseover', function(){
    swiper.autoplay.stop();
  });
  i.addEventListener('mouseout', function(){
    swiper.autoplay.start();
  });
};

//jQuery
$('.swiper-slide').on('mouseover', function(){
  swiper.autoplay.stop();
});
$('.swiper-slide').on('mouseout', function(){
  swiper.autoplay.start();
});

 

참고사이트

https://lpla.tistory.com/147