デモページはこちら

swiper.jsでスライドを自動再生させ、マウスオーバーで一時停止、マウスアウトで再開を切り替えます。
htmlのコードは以下の通りです。

<div class="swiper-container js-slider">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="images/swiper01.jpg" alt=""></div>
    <div class="swiper-slide"><img src="images/swiper02.jpg" alt=""></div>
    <div class="swiper-slide"><img src="images/swiper03.jpg" alt=""></div>
    <div class="swiper-slide"><img src="images/swiper04.jpg" alt=""></div>
    <div class="swiper-slide"><img src="images/swiper05.jpg" alt=""></div>
  </div>
  <div class="swiper-pagination"></div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

JavaScriptのコードです。
disableOnInteraction: falseでユーザーがswiperを操作（クリック、ドラッグなど）しても自動再生が停止しないようにします。これにより、マウスオーバー時の一時停止・再開を独自に制御できます。

swiper01.el.addEventListenerの「el」はelement（要素）の略で、swiper.jsのようなライブラリではswiperインスタンスが紐づいているDOM要素そのものを指します。これにより、JavaScriptからそのDOM要素に直接アクセスし、イベントリスナーを追加できます。

var swiper01 = new Swiper('.js-slider', {
  autoplay: {
    delay: 3000,
    disableOnInteraction: false, //ユーザー操作で自動再生を停止しない（重要）
  },
  loop: true,
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  }
});

// マウスオーバー時に自動再生を停止
swiper01.el.addEventListener('mouseenter', function() {
  swiper01.autoplay.stop();
});

// マウスアウト時に自動再生を再開
swiper01.el.addEventListener('mouseleave', function() {
  swiper01.autoplay.start();
});