【Swiper】流れ続けるモーダルスライダー〜矢印操作とモーダル開閉制御〜

autoplay: {
  delay: 0, // 途切れずに流れ続ける
  disableOnInteraction: false, // ユーザー操作後も自動再生を継続
},

.list {
  transition-timing-function: linear;
}

document.querySelector('.swiper-button-prev').addEventListener('click', function () {
  slide.autoplay.stop(); // 一時停止
  slide.slideTo(slide.activeIndex - 2, 1000); // 1枚前へスライド
  restartAutoplay();
});

    function restartAutoplay() {
      setTimeout(() => {
        slide.autoplay.start();
      }, 1000);
    }

    if (modal.style.display === "block") {
      
        const activeSlide = document.querySelector('.swiper-slide-active');

        // 現在のスライドの幅 + 左右マージンを取得
        const activeSlideStyle = window.getComputedStyle(activeSlide);
        const slideWidth = activeSlide.offsetWidth;
        const marginLeft = parseFloat(activeSlideStyle.marginLeft) || 0;
        const marginRight = parseFloat(activeSlideStyle.marginRight) || 0;
        const totalSlideWidth = slideWidth + marginLeft + marginRight;

        // スライド位置補正
        const translate = slide.getTranslate();
        const slideOffset = -totalSlideWidth - (translate % totalSlideWidth);
        const slideMoveDuration = slideOffset / -slideWidth;

        slide.setTranslate(translate + slideOffset);
        slide.setTransition(4000 * slideMoveDuration); // スライドの速度を調整
  
        modal.style.display = "none"; //モーダルを非表示
    } else {
        // 現在のスライド位置を取得し、即座に停止
        const currentSlidePosition = slide.getTranslate();
        slide.setTranslate(currentSlidePosition);
        slide.setTransition(0);
        modal.style.display = "block"; //モーダルを表示
    }