【JavaScript】カルーセルの下にドットインジゲーターを表示

CSS JavaScript

先日、「テキスト＆リンクをフェードアウト＆フェードイン（点滅）しながら切り替える（カルーセル）」というタイトルで投稿しましたが、これの下にドットインジゲーター（何番目のテキストが表示されているかを明示）を追加しました。もっとスマートな作り方があるかもしれません。

機能としては、上のテキストと同時に点滅して切り替わる、ドットをクリックするとそのテキストに切り替わる、JavaScriptの2•3行目に「,」で区切って、テキストとURLを追加すると、それに連動してドットも増えるというところでしょうか。

ネットで探してもあまりこれという記事がなかったので自作してみました。参考になれば幸いです。

<div id="topics">
  <a href="#" id="topics-link">トピックス１</a>
  <div id="div-radio"></div>
</div>
let cnt = 0;
const texts = ["トピックス１", "トピックス２", "トピックス３", "トピックス４"];
const links = ["#", "#", "#", "#"]
const text = document.getElementById('topics-link');
const divRadio = document.getElementById('div-radio');

const setRadio = () => {
  for (let i = 0; i < texts.length; i++) {
    let radioEle = document.createElement('input')
    radioEle.type = 'radio';
    radioEle.classList.add(i);
    radioEle.name = 'myradio';
    divRadio.appendChild(radioEle);
  }
  const myRadios = document.getElementsByName('myradio');
  myRadios.item(0).checked = true;
  myRadios.forEach(
    item => item.addEventListener('change', () => {
      cnt = item.className;
      text.textContent = texts[cnt];
      text.setAttribute('href', links[cnt]);
    })
  );
};

const setTopics = () => {
  const myRadios = document.getElementsByName('myradio');
  cnt++;
  if (cnt > texts.length - 1) {
    cnt = 0;
  }
  text.textContent = texts[cnt];
  text.setAttribute('href', links[cnt]);
  myRadios.item(cnt).checked = true;
}
setRadio();
setInterval(setTopics, 3000)
#topics-link {
  animation: fade 3s infinite;
}

#topics input[type="radio"] {
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #CCC;
}

#topics input[type="radio"]:checked {
  border-radius: 50%;
  background: #000;
  animation: faderadio 3s infinite;
}

@keyframes fade {
  0% {
    opacity: 0;
  }

  25% {
    opacity: 1;
  }

  50% {
    opacity: 1;
  }

  75% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes faderadio {
  0% {
    background: #ccc;
  }

  25% {
    background: #000;
  }

  50% {
    background: #000;
  }

  75% {
    background: #000;
  }

  100% {
    background: #ccc;
  }
}