[JavaScript] Swiper 예제 - 마우스오버시 일시정지

Swiper에서 autoplay 파라미터를 사용하여 자동재생 기능을 활성화할 수 있다.

 

const swiper = new Swiper('.swiper-container', {
  autoplay: true,
});

 

autoplay: true로 3초 마다 자동재생되는 슬라이드를 만들 수 있지만 그다지 추천하는 방법은 아니고 delay와  disableOnInteraction: false 로 세부 옵션을 추가하는 것이 좋다.

 

const swiper = new Swiper('.swiper-container', {
  autoplay: {
    delay: 2000,
    disableOnInteraction: false,
  },
});

delay는 자동 재생 시간으로 유명하니 넘어가고 disableOnInteraction은 기본값은 true로 사용자가 상호작용 (예를 들어 마우스로 슬라이드를 수동 전환하는 등) 하게 될 경우 자동 재생이 멈추게 된다.

 

하지만 일반적으로 슬라이드를 수동으로 넘기다가 멈추면 다시 알아서 자동 재생되는 것을 원하기 때문에 이 기능은 비활성화하는 것이 좋다.

그리고 pauseOnMouseEnter 파라미터도 있다.

기본값은 false로 mouseEnter 일 때 일시 정지하는 기능인 것으로 추측되지만 정확하게는 마우스를 누르고 있는 상태에서 자동 재생이 멈추는 기능이다.

따라서 이 파라미터로 마우스오버시 일시정지 기능을 사용할 수 없다.

 

파라미터만으로 마우스오버시 일시정지를 구현할 수 없다.

하지만 Swiper 메서드에 이를 해결할 수 있는 단서가 있다.

swiper.autoplay.start();

swiper.autoplay.stop();

 

Swiper의 자동재생 기능을 시작하고 정지하는 메서드다.

이제 이 메서드를 내가 원하는 상황에서 입력하면 된다.

마우스오버 했을 때 swiper.autoplay.start();

마우스오버가 아닐 때 swiper.autoplay.stop();

자바스크립트의 addEventListener 메서드를 사용하여 이벤트를 감지하면 된다.

 

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

 

제이쿼리를 사용하면 다음과 같다.

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

 

이것으로 마우스오버시 일시정지, 그리고 마우스아웃시 재생되는 Swiper 기능을 만들었다.