@shuitongmanposted at 2025-03-07

swiperを用いたスライドショー

Q&A

解決したいこと

現在の状況としましては、ホバーでスライドショーが遅くなることは確認できたのですが、ホバーをやめたさいに元のスピードに戻りません。
ホバーを辞めた時に元のスピードに時差なく戻るようにしたい。

該当するソースコード

javascript


(function() { 
 let normalSpeed = 5000; 
 let slowSpeed = 30000; 
 const mySwiper = new Swiper('.swiper', { 
 loop: true, 
 slidesPerView: 'auto', 
 speed: normalSpeed, 
 spaceBetween: 10, 
 allowTouchMove: false, 
 autoplay: { 
 delay: 0, 
 disableOnInteraction: false, 
 }, 
 }); 
 
 let getTranslate; 
 let autoplayWasRunning = true;
 
 document.querySelectorAll('.swiper-slide').forEach(function(slide) { 
 slide.addEventListener('mouseover', function() { 
 getTranslate = mySwiper.getTranslate(); 
 mySwiper.setTranslate(getTranslate); 
 mySwiper.setTransition(0); 
 
 autoplayWasRunning = mySwiper.autoplay.running;
 mySwiper.autoplay.stop();
 
 setTimeout(function() { 
 mySwiper.params.speed = slowSpeed; 
 mySwiper.update(); 
 mySwiper.setTransition(slowSpeed); 
 mySwiper.autoplay.start();
 }, 10); 
 }); 
 
 slide.addEventListener('mouseout', function() { 
 mySwiper.params.speed = normalSpeed; 
 mySwiper.update(); 
 mySwiper.setTransition(normalSpeed); 
 
 if (autoplayWasRunning) {
 mySwiper.autoplay.stop();
 mySwiper.autoplay.start();
 }
 }); 
 }); 
})();

html
<div class="swiper">
        <div class="swiper-wrapper">
         <div class="swiper-slide slide video-slide">
           <img src="./img/bnr-aibase-3.jpg" alt="">
           <video src="./img/bnr-aistudio.mp4" loop muted></video>
         </div>
    <div class="swiper-slide slide video-slide">
      <img src="./img/bnr-aibase-cover.png" alt="">
      <video src="./img/bnr-cm.mp4" loop muted></video>
    </div>
        <div class="swiper-slide slide image-slide">
            <img src="./img/bnr-aipark-1.jpg" alt="" class="image1">
            <img src="./img/bnr-casestudy-1.jpg" alt="" class="image2">
        </div>
        <div class="swiper-slide slide image-slide">
            <img src="./img/bnr-aipark-1.jpg" alt="" class="image1">
            <img src="./img/bnr-casestudy-1.jpg" alt="" class="image2">
        </div>
        <div class="swiper-slide slide image-slide">
            <img src="./img/bnr-aipark-1.jpg" alt="" class="image1">
            <img src="./img/bnr-casestudy-1.jpg" alt="" class="image2">
        </div>
        <div class="swiper-slide slide image-slide">
            <img src="./img/bnr-aipark-1.jpg" alt="" class="image1">
            <img src="./img/bnr-casestudy-1.jpg" alt="" class="image2">
        </div>
  </div>
    </div>

0 likes

1Answer

@juner posted at 2025-03-07

mouseover はマウスが乗っている間中発火するのですが、 mouseout 時に mouseover 時に登録した setTimeout をキャンセルして実行しないようにするか、その時間だけ待つ必要があると思われます。

(function() { 
  let normalSpeed = 5000; 
  let slowSpeed = 30000; 
  const mySwiper = new Swiper('.swiper', { 
    loop: true, 
    slidesPerView: 'auto', 
    speed: normalSpeed, 
    spaceBetween: 10, 
    allowTouchMove: false, 
    autoplay: { 
      delay: 0, 
      disableOnInteraction: false, 
    }, 
  }); 

  let getTranslate; 
  let autoplayWasRunning = true;

  document.querySelectorAll('.swiper-slide').forEach(function(slide) {
    const clearSet = new Set();
    slide.addEventListener('mouseover', function() { 
      getTranslate = mySwiper.getTranslate(); 
      mySwiper.setTranslate(getTranslate); 
      mySwiper.setTransition(0); 

      autoplayWasRunning = mySwiper.autoplay.running;
      mySwiper.autoplay.stop();

      const clear = 
      setTimeout(function() {
        // clear を削除
        clearSet.delete(clear);
        mySwiper.params.speed = slowSpeed; 
        mySwiper.update(); 
        mySwiper.setTransition(slowSpeed); 
        mySwiper.autoplay.start();
      }, 10);
      // clear を保存
      clearSet.add(clear);
    }); 

  slide.addEventListener('mouseout', function() { 
    // #region clear を使って全てキャンセル
    for ( const clear of clearSet)
      clearTimeout(clear);
    clearSet.clear();
    // #endregion
    mySwiper.params.speed = normalSpeed; 
    mySwiper.update(); 
    mySwiper.setTransition(normalSpeed); 

    if (autoplayWasRunning) {
      mySwiper.autoplay.stop();
      mySwiper.autoplay.start();
    }
    }); 
  }); 
})();

0Like

Comments

@shuitongman
Questioner
回答ありがとうございます。
回答していただいたコードはmouseoverイベントによって設定された遅延処理をmouseoutイベントでキャンセルする機能を持っていてこれにより、マウスがスライド上を素早く出入りした場合に、不要な遅延処理が実行されるのを防いでいると思うのですが、こちらのコードを利用してもやはり元のスピードにもどらないですね。
どうすればホバーをやめたら瞬時に元のスピードに戻りますかね、、
@juner
とりあえずイベント及び setTimeout に console.log 等仕込んでどの順番で実行されているか確認してください。試しに mySwiper.params.speed を出力してもいいかもしれません
@juner
とりあえずサイズ周りわからんので転記だけ

before :

after :

@shuitongman

Questioner

ありがとうございます。
(function() {
let normalSpeed = 5000;
let slowSpeed = 30000;
const mySwiper = new Swiper('.swiper', {
loop: true,
slidesPerView: 'auto',
speed: normalSpeed,
spaceBetween: 10,
allowTouchMove: false,
autoplay: {
delay: 0,
disableOnInteraction: false,
},
});

let getTranslate;
let autoplayWasRunning = true;

document.querySelectorAll('.swiper-slide').forEach(function(slide, index) {
const clearSet = new Set();
slide.addEventListener('mouseover', function() {
console.log(スライド ${index} にマウスオーバー);
getTranslate = mySwiper.getTranslate();
mySwiper.setTranslate(getTranslate);
mySwiper.setTransition(0);

  autoplayWasRunning = mySwiper.autoplay.running;
  mySwiper.autoplay.stop();
  console.log(`スライド ${index} autoplay停止, 現在のspeed: ${mySwiper.params.speed}`);

  const clear = setTimeout(function() {
    clearSet.delete(clear);
    mySwiper.params.speed = slowSpeed;
    mySwiper.update();
    mySwiper.setTransition(slowSpeed);
    mySwiper.autoplay.start();
    console.log(`スライド ${index} autoplay再開(slowSpeed), 現在のspeed: ${mySwiper.params.speed}`);
  }, 10);
  clearSet.add(clear);
  console.log(`スライド ${index} setTimeout設定`);
});

slide.addEventListener('mouseout', function() {
  console.log(`スライド ${index} からマウスアウト`);
  for (const clear of clearSet)
    clearTimeout(clear);
  clearSet.clear();
  console.log(`スライド ${index} clearTimeout実行`);
  mySwiper.params.speed = normalSpeed;
  mySwiper.update();
  mySwiper.setTransition(normalSpeed);
  console.log(`スライド ${index} speedをnormalSpeedに戻す, 現在のspeed: ${mySwiper.params.speed}`);

  if (autoplayWasRunning) {
    mySwiper.autoplay.stop();
    mySwiper.autoplay.start();
    console.log(`スライド ${index} autoplay再開(normalSpeed)`);
  }
});

});
})();

こちらconsoleで確認できるようにしたものなのですが問題なくコードは読み込まれてそうでした。
ただ、読み込まれてから実際にspeedが5000に戻るのまでにじかんがかかっていそうです。

@shuitongman
Questioner
urlで飛ぶ方法がわからなくてコードがわかりにくくて申し訳ありません。

Are you sure you want to delete the question?

swiperを用いたスライドショー

解決したいこと

該当するソースコード

1Answer

Comments

before :

after :

Your answer might help someone💌