Swiper Play button

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

HTML

<div class="main_swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div class="img">
        <img src="./img/mainImg01.jpg" alt="">
      </div>
      <div class="inner">
        <div class="txt">slide 1</div>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="img">
        <img src="./img/mainImg02.jpg" alt="">
      </div>
      <div class="inner">
        <div class="txt">slide 2</div>
      </div>
    </div>
  </div>
  <div class="swiper-btm">
    <div class="inner flexSb">
      <div class="flex">
        <div class="autoplay-progress">
          <svg viewBox="0 0 320 3">
            <rect height="3" width="320" y="0" x="0"></rect>
          </svg>
        </div>
        <button type="button" class="swiper-btn"></button>
      </div>
      <div class="scroll">
        <img src="./img/scroll.png" alt="scroll down">
      </div>
    </div>
  </div>
</div>

JS

/* swiper */
const progressCircle = document.querySelector(".autoplay-progress svg");
var swiper = new Swiper(".main_swiper", {
  spaceBetween: 0,
  centeredSlides: true,
  effect:"fade",
  speed:1000,
  loop:true,
  autoplay: {
    delay: 3000,
    disableOnInteraction: false,
  },
  /*pagination: {
	el: ".swiper-pagination",
	clickable: true,
	},*/
  watchSlidesProgress: true,
  on: {
    autoplayTimeLeft(s, time, progress) {
      progressCircle.style.setProperty("--progress", 1 - progress);
    }
  }
});

let tmp = false;
$(".swiper-btn").on("click",function(){
  $(this).toggleClass("pause");
  if(!tmp) {
    swiper.autoplay.stop();
  }else {
    swiper.autoplay.start();
  }
  tmp = !tmp;

});