vue のスワイパー コンポーネントを使用して、カルーセルを手動で切り替えた後に自動カルーセルが失敗する問題を解決します

    new Swiper(".swiper-container", {
    
    
        slidesPerView: 4, //一页显示4个
        //是否循环播放
        loop: true,
        autoplay: {
    
    
          delay: 3000 //3秒切换一次
        },
        //滑动方向
        direction: 'horizontal',
        //左右切换按钮
        navigation: {
    
    
          nextEl: ".swiper-button-next-customize",
          prevEl: ".swiper-button-prev-customize",
        },
      });

関連情報を照会したところ、スワイパーの自動再生に disableOnInteraction 属性があることがわかりました: disableOnInteraction これを使用すると、毎回自動再生が再起動されてしまうため、次のようにコードを修正して問題を解決し
ます

    new Swiper(".swiper-container", {
    
    
        slidesPerView: 4, //一页显示4个
        //是否循环播放
        loop: true,
        autoplay: {
    
    
          disableOnInteraction: false,
          delay: 3000 //3秒切换一次
        },
        //滑动方向
        direction: 'horizontal',
        //左右切换按钮
        navigation: {
    
    
          nextEl: ".swiper-button-next-customize",
          prevEl: ".swiper-button-prev-customize",
        },
      });

ここで使用される Swiper のバージョンは 6.8.4 です。