swiperでボタンをクリックした後にスライドがループしない問題を解決したい。

ボタンをクリックした後もスライドがループされる状態を保ちたい。

jsのswiperオプションのループとクリック、両方オンにしている。

ループが機能しない。

ボタンを押すとループのみ機能しなくなる。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5    <meta charset="UTF-8">
6    <meta http-equiv="X-UA-Compatible" content="IE=edge">
7    <meta name="viewport" content="width=device-width, initial-scale=1.0">
8    <title>Document</title>
9    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
10    <link rel="stylesheet" href="css/style.css">
11</head>
12
13<body>
14    <div class="slide-wrap">
15        <div class="slide-ac-flex">
16            <div class="slide-ac-text">test</div>
17            <div class="swiper-pagination swiper-pagination-white"></div>
18        </div>
19        <div class="swiper-container">
20            <div class="swiper-wrapper">
21                <div class="swiper-slide">
22                    <img src="img/sample02.jpg" alt="">
23                </div>
24                <div class="swiper-slide">
25                    <img src="img/sample02.jpg" alt="">
26                </div>
27                <div class="swiper-slide">
28                    <img src="img/sample02.jpg" alt="">
29                </div>
30                <div class="swiper-slide">
31                    <img src="img/sample02.jpg" alt="">
32                </div>
33            </div>
34        </div>
35    </div> 
36
37    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
38    <script src="js/script.js"></script>
39</body>
40
41</html>

CSS
1.swiper-slide img {
2  width: 100%;
3  border-radius: 12px;
4}
5
6.swiper-pagination {
7  width: 100%;
8  display: -webkit-box;
9  display: -ms-flexbox;
10  display: flex;
11  -webkit-box-pack: center;
12  -ms-flex-pack: center;
13  justify-content: center;
14  gap: 2.4rem;
15}
16
17.swiper-pagination-bullet {
18  background: #9aa5aa;
19  opacity: unset;
20  outline: unset;
21}
22
23.swiper-pagination-bullet-active {
24  background: #5d79f4;
25}
26
27.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
28  margin: unset;
29}
30
31.slide-wrap {
32  position: relative;
33}
34
35.swiper-button-next.swiper-button-white,
36.swiper-button-prev.swiper-button-white {
37  --swiper-navigation-color: #5d79f4;
38}
39
40.swiper-slide:not(.swiper-slide-active) {
41  -webkit-transform: scale(0.8);
42  transform: scale(0.8);
43  opacity: 0.8;
44  -webkit-filter: grayscale(30%);
45  filter: grayscale(30%);
46}
47
48.slide-ac-flex {
49  display: -webkit-box;
50  display: -ms-flexbox;
51  display: flex;
52  -webkit-box-align: center;
53  -ms-flex-align: center;
54  align-items: center;
55}
56
57.slide-ac-text {
58  font-weight: bold;
59  font-size: 14px;
60  line-height: 110%;
61  letter-spacing: 0.04em;
62  color: #212d33;
63  z-index: 50;
64  cursor: pointer;
65  outline: unset;
66}
67/*# sourceMappingURL=style.css.map */
68

js
1const changeSlideSpeed = 1000;
2const swiper = new Swiper('.swiper-container', {
3    // Optional parameters
4    speed: changeSlideSpeed,
5    loop: true,
6    slidesPerView: 4,
7    // centeredSlides: true,
8
9    autoplay: {
10        delay: 2500
11    },
12
13    // If we need pagination
14    pagination: {
15        el: '.swiper-pagination',
16        clickable: true
17    },
18
19    // Navigation arrows
20    navigation: {
21        // nextEl: '.swiper-button-next',
22        nextEl: '.slide-ac-text',
23        // prevEl: '.swiper-button-prev',
24    },
25
26    on: {
27        init: function () {
28            const self = this;
29            setTimeout(() => {
30                const slideElement = self.slides;
31                for (let i = 0; i < slideElement.length; i++) {
32                    slideElement[i].style.transition = (changeSlideSpeed / 1000) + 's';
33                }
34            }, 10);
35        }
36    }
37});
38
39document.querySelector('.swiper-slide').style.width = "600px";