Swiper 마우스 올렸을 때 슬라이드 정지

Swiper.js는 웹사이트에서 이미지를 슬라이드 형태로 보여주는 기능을 제공하는 라이브러리입니다. Swiper의 Autoplay 기능을 설정하면 슬라이드가 자동으로 전환됩니다. 그러나 사용자가 마우스를 슬라이드에 올렸을 때 이를 일시정지시키고 싶을 때는 몇 가지 설정이 필요합니다. 여기에 대한 설정 방법을 설명하겠습니다.

 

Autoplay 설정

Swiper의 Autoplay 기능은 다음과 같이 설정할 수 있습니다:

const swiper = new Swiper('.swiper-container', {
  autoplay: {
    delay: 5000, // 슬라이드 전환 간격 (밀리초 단위)
    disableOnInteraction: false, // 상호작용 후에도 Autoplay 유지
    pauseOnMouseEnter: true, // 마우스 오버 시 Autoplay 일시정지
  },
});

 

주요 옵션 설명

• delay: 슬라이드가 전환되는 간격을 설정합니다. 기본값은 3000ms입니다.
• disableOnInteraction: 사용자가 슬라이드를 터치하거나 클릭해도 Autoplay가 멈추지 않고 계속 작동하게 하려면 false로 설정합니다. 기본값은 true입니다.
• pauseOnMouseEnter: 마우스를 슬라이드 위에 올렸을 때 Autoplay를 일시정지하려면 true로 설정합니다. 이 옵션이 true로 설정되면, 마우스를 떼면 Autoplay가 다시 시작됩니다.

 

Autoplay 이벤트 제어

Autoplay 기능을 좀 더 세부적으로 제어하려면 Swiper에서 제공하는 이벤트를 사용할 수 있습니다. 대표적인 이벤트는 다음과 같습니다:

• autoplayStart: Autoplay가 시작될 때 발생합니다.
• autoplayStop: Autoplay가 중지될 때 발생합니다.
• autoplayPause: Autoplay가 일시정지될 때 발생합니다.
• autoplayResume: Autoplay가 다시 시작될 때 발생합니다.

swiper.on('autoplayStart', function() {
  console.log('Autoplay started');
});

swiper.on('autoplayStop', function() {
  console.log('Autoplay stopped');
});

swiper.on('autoplayPause', function() {
  console.log('Autoplay paused');
});

swiper.on('autoplayResume', function() {
  console.log('Autoplay resumed');
});

 

그누보드 QA - swiper 마우스 오버 시 멈춤

swiper 마우스 오버 시 멈춤 > SIR

 

이 설정들을 통해 Swiper.js의 슬라이드를 사용자 경험에 맞게 보다 세밀하게 제어할 수 있습니다. 이를 활용하여 사용자에게 더 나은 인터랙티브한 경험을 제공할 수 있습니다.