おぼえがき

                  
.swiper__content {
  width: min(100%, 1000px);
  margin: 0 auto 50px;
}
.swiper {
  display: flex;
}
.swiper-slide img {
  width: 100%;
  height: auto;
}

/* 無効化時用のスタイル */
@media screen and (max-width: 768px) {
  .swiper-wrapper {
    flex-direction: column;
    row-gap: 20px;
  }
  .swiper-button-prev,
  .swiper-button-next {
    display: none;
  }
}
                  
                

                  
document.addEventListener('DOMContentLoaded', function() {
    var swiper;
    // 有効化時のオプションを記述
    function initializeSwiper() {
        swiper = new Swiper('.swiper', {
            spaceBetween: 10,
            slidesPerView: 3,
            pagination: {
                el: ".swiper-pagination",
                clickable: true,
            },
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev"
            },
        });
    }
    // 無効化する用の記述
    function destroySwiper() {
        if (swiper) {
            swiper.destroy();
            swiper = undefined;
        }
    }
    // if分を用いて横幅に応じて関数を実行
    function handleResize() {
        var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
        if (w < 769) {
            if (!swiper) {
                initializeSwiper();
            }
        } else {
            destroySwiper();
        }
    }
    // 初回実行
    handleResize();
    window.addEventListener('resize', handleResize);
});