swiper 반응형에 autoplay 멈추는 현상

//html

<div class="main2_sd">
    <div class="swiper-container main2_sd_swiper">
        <ul class="swiper-wrapper">
            <li class="swiper-slide">
                <div class="item">
                    <div class="thum"><img src="<?=G5_THEME_IMG_URL?>/m2_1.png" alt=""></div>
                    <div class="desc">Blockchain</div>
                </div>
            </li>
            <li class="swiper-slide">
                <div class="item">
                    <div class="thum"><img src="<?=G5_THEME_IMG_URL?>/m2_2.png" alt=""></div>
                    <div class="desc">AR / ITO</div>
                </div>
            </li>
            <li class="swiper-slide">
                <div class="item">
                    <div class="thum"><img src="<?=G5_THEME_IMG_URL?>/m2_3.png" alt=""></div>
                    <div class="desc">Game</div>
                </div>
            </li>
            <li class="swiper-slide">
                <div class="item">
                    <div class="thum"><img src="<?=G5_THEME_IMG_URL?>/m2_4.png" alt=""></div>
                    <div class="desc">Metaverse</div>
                </div>
            </li>
            <li class="swiper-slide">
                <div class="item">
                    <div class="thum"><img src="<?=G5_THEME_IMG_URL?>/m2_5.png" alt=""></div>
                    <div class="desc">NFT</div>
                </div>
            </li>
        </ul>
    </div>
</div>


//스타일

<style>

.main2_sd{color: #fff;margin-top: 100px;margin-left: 240px;}
.main2_sd_swiper{text-align: center;}
.main2_sd_swiper .swiper-slide{width: auto;margin-right: 67px;}
.main2_sd_swiper .swiper-slide .item{width: 300px;height: 350px;border-radius: 30px;background: url('../img/m2_sd_bg.png') 50% 50%;background-size: cover;padding: 80px 0;display: flex;flex-direction: column;align-items: center;justify-content: space-around;box-shadow: 33px 51px 27px 0px rgba(0, 0, 0, 0.15);margin-bottom: 80px;}
.main2_sd_swiper .swiper-slide .thum{}
.main2_sd_swiper .swiper-slide .thum img{}
.main2_sd_swiper .swiper-slide .desc{font-family: 'Montserrat', sans-serif;font-weight: 500;font-size: 22px;}

 

@media(max-width: 1650px){

    .main2_sd{margin-left: 10%;margin-top: 70px;}
    .main2_sd_swiper .swiper-slide{margin-right: 50px;}
    .main2_sd_swiper .swiper-slide .thum img{transform: scale(0.9);transform-origin: center center;}

}

 

@media(max-width: 700px){

    .main2_sd{margin-left: 0;}
    .main2 .main2_sd_swiper{width: 85%;overflow: visible;}
    .main2_sd_swiper .swiper-slide{}
    .main2_sd_swiper .swiper-slide .item{box-shadow: 0 20px 20px 0px rgb(0 0 0 / 15%);}

}

 

@media(max-width: 580px){

    .main2 .main2_sd_swiper{width: 300px;}
    .main2_sd_swiper .swiper-slide .item{width: 300px;height: 350px;padding: 80px 0;}

}

</style>

 

//스크립트

<script>

var swiper = new Swiper('.main2_sd_swiper', {
    slidesPerView: 'auto',
    spaceBetween: 0,
    centeredSlides: false,
    autoplay: {
        delay: 1000,
        disableOnInteraction: false,
    },
    speed: 1500,
    loop: true,
    observer: true,
    observeParents: true,
    autoplayDisableOnInteraction: false,
    breakpoints:{
        580: {
            slidesPerView: 1,
            spaceBetween: 20,
            centeredSlides: true,
        },
    },
});

</script>