JS カルーセル　画像下の「○○○」が画像に合わせて動かない

前提

JSにてカルーセルを実装する練習をしています。
よくある、画像下の○がうまく動きません。
今回は、虫のマークで再現しております。
何がいけないか、ご教授お願い致します。

実現したいこと

画像に合わせて虫のマークが赤く移動する

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="UTF-8" />
5    <link rel="stylesheet" href="css/reset.css" />
6    <link rel="stylesheet" href="css/style.css" />
7    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
8    <title>練習_カルーセル</title>
9  </head>
10  <body>
11    <div class="container">
12      <ul>
13        <li><img src="img/a.png" /></li>
14        <li><img src="img/b.png" /></li>
15        <li><img src="img/c.png" /></li>
16      </ul>
17      <span id="next" class="material-symbols-outlined"> arrow_forward_ios </span>
18      <span id="back" class="material-symbols-outlined"> arrow_back_ios </span>
19    </div>
20
21    <div id="button">
22      <span class="material-symbols-outlined active"> bug_report </span>
23      <span class="material-symbols-outlined"> bug_report </span>
24      <span class="material-symbols-outlined"> bug_report </span>
25    </div>
26    <script src="js/main.js"></script>
27  </body>
28</html>
29

css
1@charset "UTF-8";
2
3.container {
4	position: relative;
5	overflow: hidden; /* 要素の内容に収まらないとき、隠す */
6	width: 100%;
7	height: 200px;
8}
9
10ul {
11	display: flex;
12	height: 100%;
13	transition: transform 0.3s;
14}
15
16li {
17	min-width: 100%;
18	height: 100%;
19}
20
21img {
22	width: 100%;
23	height: 100%;
24
25	object-fit: cover;
26}
27
28#next,#back {
29	position: absolute;
30	top: 50%;
31	font-size: 32px;
32	cursor: pointer;
33	transform: translateY(-50%);
34}
35
36#next:hover,#back:hover {
37	opacity: 0.8;
38}
39
40#next {
41	right: 5px;
42}
43
44#back {
45	left: 5px;
46}
47
48#next.hidden {
49	display: none;
50}
51
52#back.hidden {
53	display: none;
54}
55
56#button {
57	margin-top: 8px;
58	text-align: center;
59}
60
61#button {
62	opacity: 0.5;
63}
64
65#button span.active {
66	color: red;
67}
68
69#button span+span {
70	margin-left: 16px;
71}
72

js
1"use strict";
2
3{
4  const next = document.getElementById("next");
5  const back = document.getElementById("back");
6  const ul = document.querySelector("ul"); //querySelectorAllだと配列にならないのでNG。
7  const slides = ul.children;
8  const button = document.getElementById("button");//ここがよくわかりません
9  const bug = button.children;//ここがよくわかりません
10  let index = 0;
11
12  hideBtn();
13
14  //画像に合わせて虫が移動
15  function hoge() {
16    for (let i = 0; i < slides.length; i++) {
17      bug.classList.remove("active");
18    }
19    bug[index].classList.add("active");
20  }
21
22  //要素のサイズを取得する
23  function moveSlides() {
24    //getBoundingClientRect().widthは、要素のサイズを取得するメソッド
25    const slideWidth = slides[0].getBoundingClientRect().width;
26
27    //ul(flexで並んでいる画像）に対して、(-1*1枚の画像*何枚目かpx)の量を左に移動
28    ul.style.transform = `translateX(${-1 * slideWidth * index}px)`;
29  }
30
31  //次の画像へ
32  next.addEventListener("click", () => {
33    index++;
34    moveSlides();
35    hideBtn();
36    hoge();
37  });
38
39  //前の画像へ
40  back.addEventListener("click", () => {
41    index--;
42    moveSlides();
43    hideBtn();
44    hoge();
45  });
46
47  //ボタンを隠す
48  function hideBtn() {
49    next.classList.remove("hidden");
50    back.classList.remove("hidden");
51    if (index === 0) {
52      back.classList.add("hidden");
53    } else if (index === slides.length - 1) {
54      next.classList.add("hidden");
55    }
56  }
57}
58

reset.css
1/* 
2html5doctor.com Reset Stylesheet
3v1.6.1
4Last Updated: 2010-09-17
5Author: Richard Clark - http://richclarkdesign.com 
6Twitter: @rich_clark
7*/
8
9html, body, div, span, object, iframe,
10h1, h2, h3, h4, h5, h6, p, blockquote, pre,
11abbr, address, cite, code,
12del, dfn, em, img, ins, kbd, q, samp,
13small, strong, sub, sup, var,
14b, i,
15dl, dt, dd, ol, ul, li,
16fieldset, form, label, legend,
17table, caption, tbody, tfoot, thead, tr, th, td,
18article, aside, canvas, details, figcaption, figure, 
19footer, header, hgroup, menu, nav, section, summary,
20time, mark, audio, video {
21    margin:0;
22    padding:0;
23    border:0;
24    outline:0;
25    font-size:100%;
26    vertical-align:baseline;
27    background:transparent;
28}
29
30body {
31    line-height:1;
32}
33
34article,aside,details,figcaption,figure,
35footer,header,hgroup,menu,nav,section { 
36	display:block;
37}
38
39nav ul {
40    list-style:none;
41}
42ul{
43list-style: none;
44}
45
46blockquote, q {
47    quotes:none;
48}
49
50blockquote:before, blockquote:after,
51q:before, q:after {
52    content:'';
53    content:none;
54}
55
56a {
57    margin:0;
58    padding:0;
59    font-size:100%;
60    vertical-align:baseline;
61    background:transparent;
62 list-style:none;
63 text-decoration: none;
64}
65
66/* change colours to suit your needs */
67ins {
68    background-color:#ff9;
69    color:#000;
70    text-decoration:none;
71}
72
73/* change colours to suit your needs */
74mark {
75    background-color:#ff9;
76    color:#000; 
77    font-style:italic;
78    font-weight:bold;
79}
80
81del {
82    text-decoration: line-through;
83}
84
85abbr[title], dfn[title] {
86    border-bottom:1px dotted;
87    cursor:help;
88}
89
90table {
91    border-collapse:collapse;
92    border-spacing:0;
93}
94
95/* change border colour to suit your needs */
96hr {
97    display:block;
98    height:1px;
99    border:0;   
100    border-top:1px solid #cccccc;
101    margin:1em 0;
102    padding:0;
103}
104
105input, select {
106    vertical-align:middle;
107}