swiperの青いボタンに対して入れ替える処理を行いたい。

svgの要素と動いているボタン（青）を入れ替えたい。

・クリックされた時に入れ替える。
・スライドが自動ループされた時に入れ替える。

svgの外周の円が一周するタイミングで次のスライドを表示する為に上記の処理を行いたい。

発生している問題・エラーメッセージ

1. 4つのボタンを取得する。
2. 青くなったボタンを取得する。
3. svgを取得する。
4. ループとクリックの二つのタイミングで2を削除する。
5. 3を2の部分に代入する。

このプロセスで目的を完遂できるか考えてみた。
しかしJSの処理に詰まってしまった。

該当のソースコード

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    <svg width="16" height="16" class="news__ac-btn" id="news__ac-active">
38        <circle cx="8" cy="8" r="7"></circle>
39        <circle cx="8" cy="8" r="4" stroke-width="0" fill="#5F5BFF"></circle>
40    </svg>
41
42    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
43    <script src="js/script.js"></script>
44</body>
45
46</html>

CSS
1@charset "utf-8";
2
3.swiper-slide img {
4    width: 100%;
5    border-radius: 12px;
6}
7
8.swiper-pagination {
9    width: 100%;
10    display: flex;
11    justify-content: center;
12    gap: 2.4rem;
13}
14
15.swiper-pagination-bullet {
16    background: #9aa5aa;
17    opacity: unset;
18    outline: unset;
19}
20
21.swiper-pagination-bullet-active {
22    background: #5d79f4;
23}
24
25.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
26    margin: unset;
27}
28
29.slide-wrap {
30    position: relative;
31}
32
33.swiper-container {
34    // width: calc(100% - 10rem);
35}
36
37.swiper-button-next.swiper-button-white,
38.swiper-button-prev.swiper-button-white {
39    --swiper-navigation-color: #5d79f4;
40}
41
42.swiper-slide:not(.swiper-slide-active) {
43    transform: scale(0.9);
44    opacity: 0.8;
45    filter: grayscale(30%);
46}
47
48.slide-ac-flex {
49    display: flex;
50    align-items: center;
51}
52
53.slide-ac-text {
54    font-weight: bold;
55    font-size: 14px;
56    line-height: 110%;
57    letter-spacing: 0.04em;
58    color: #212d33;
59    z-index: 50;
60    cursor: pointer;
61    outline: unset;
62}
63
64svg {
65    transform: rotate(-90deg);
66}
67
68.circle {
69    position: absolute;
70    width: 8px;
71    height: 8px;
72    border-radius: 50%;
73    background: #5f5bff;
74    top: 50%;
75    left: 50%;
76    transform: translate(-50%, -50%);
77}
78
79@keyframes circle {
80    0% {
81        stroke-dasharray: 0 377;
82    }
83    99.9%,
84    to {
85        stroke-dasharray: 377 377;
86    }
87}
88
89.news__ac-btn {
90    position: relative;
91    fill: transparent;
92    stroke: #5f5bff;
93    stroke-width: 1;
94    animation: circle 5s infinite;
95    cursor: pointer;
96    margin-right: 2.4rem;
97}
98

JS
1const changeSlideSpeed = 1000;
2const swiper = new Swiper('.swiper-container', {
3    speed: changeSlideSpeed,
4    loop: true,
5    slidesPerView: 4,
6
7    autoplay: {
8        delay: 2500,
9        disableOnInteraction: false,
10    },
11
12    pagination: {
13        el: '.swiper-pagination',
14        clickable: true
15    },
16
17    navigation: {
18        nextEl: '.slide-ac-text',
19    },
20
21    on: {
22        init: function () {
23            const self = this;
24            setTimeout(() => {
25                const slideElement = self.slides;
26                for (let i = 0; i < slideElement.length; i++) {
27                    slideElement[i].style.transition = (changeSlideSpeed / 1000) + 's';
28                }
29            }, 10);
30        }
31    }
32});
33
34
35const slideBtn = document.querySelectorAll('.swiper-pagination > *');
36// console.log(slideBtn);
37const slideSv = document.querySelector('.news__ac-btn');
38slideBtn.forEach(a => {
39    a.addEventListener('load', function (e) {
40        console.log(e.target, 'e.target');
41    })
42    if (a.className === 'swiper-pagination-bullet-active') {
43        this.style.display = 'none';
44    }
45})