重复的幻灯片行为不正确

如何解决重复的幻灯片行为不正确

如果您查看下面滑块的行为，当滑块发生变化时（可以通过单击箭头、圆圈或滚动），.active 类将应用于中间的圆圈。如果你移动到某个点（如果你向右走，你会在到达红色圆圈时看到错误。如果你向左走，你会看到绿色圆圈中的错误）你会注意到活动类是未正确应用，因为库 swiperJS 创建了重复的幻灯片（您可以使用浏览器的检查器看到这一点）并且它们的行为不符合预期。

有谁知道如何让我的 js 也适用于重复的幻灯片？

 // COLORES
  $(".circulo-color").first().addClass("active");
  $(".btn-version").first().addClass("active");

  $(".circulo-color").on("click",function () {
    $(".circulo-color").removeClass("active");
    $(this).addClass("active");
    let urlImg = $(this).data("img");
    let text = $(this).data("text");
    let versiones = $(this).data("ver");
    $("#auto-color")
      .fadeOut(200,function () {
        $("#auto-color").attr("src",urlImg);
      })
      .fadeIn(200);
    $("#texto-color")
      .fadeOut(200,function () {
        $("#texto-color").text(text);
      })
      .fadeIn(200);

    if (versiones != "") {
      $("#version-color")
        .fadeOut(200,function () {
          $("#version-color").text(
            "disponible sólo en las versiones: " + versiones
          );
        })
        .fadeIn(200);
    } else {
      $("#version-color").html("&nbsp;");
    }
  });

  var swiperColores = new Swiper(".swiper-container.colores",{
    slidetoClickedSlide: true,loop: true,centeredSlides: true,height: 40,navigation: {
      nextEl: ".swiper-button-next",prevEl: ".swiper-button-prev"
    },mousewheel: true,slidesPerView: 3,spaceBetween: 1,on: {
      slideChangeTransitionStart: function () {
        $(".swiper-slide-active>.circulo-color").click();
      },init: function () {
        $(document).on("ready",function () {
          $(".swiper-slide-active>.circulo-color").click();
        });
      }
    }
  });

.circulo-color {
    display: inline-block;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    outline: none;
    border: 0;
    margin-top: 2rem;
    margin-right: 0.5rem;
    padding: 1rem;
    border: 6px solid #e6e5e1 !important;
    transition: 0.3s ease all;
  }

  .circulo-color.active {
    Box-shadow: 0px 0px 0px 2px #3ec8f0;
  }
  
  .swiper-slide{
  transform: translate(3.5rem,-1rem)
  }

<!DOCTYPE html>
<html lang="en">
  <head>
    <Meta charset="UTF-8" />
    <Meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <Meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>

    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css" />
    <link
      rel="stylesheet"
      href="https://unpkg.com/swiper/swiper-bundle.min.css"
    />
    <script
      src="https://code.jquery.com/jquery-3.6.0.min.js"
      integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
      crossorigin="anonymous"
    ></script>
    <script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
  </head>
  <body>
    <div class="swiper-container colores">
      <div class="swiper-wrapper">
        <div class="swiper-slide" style="display: block;">
          <button
            class="circulo-color"
            data-img="1"
            data-text="1"
            data-ver="1"
            style="background-color: red;"
          ></button>
        </div>

        <div class="swiper-slide" style="display: block;">
          <button
            class="circulo-color"
            data-img="2"
            data-text="2"
            data-ver="2"
            style="background-color: yellow;"
          ></button>
        </div>

        <div class="swiper-slide" style="display: block;">
          <button
            class="circulo-color"
            data-img="3"
            data-text="3"
            data-ver="3"
            style="background-color: blue;"
          ></button>
        </div>

        <div class="swiper-slide" style="display: block;">
          <button
            class="circulo-color"
            data-img="4"
            data-text="4"
            data-ver="4"
            style="background-color: teal;"
          ></button>
        </div>

        <div class="swiper-slide" style="display: block;">
          <button
            class="circulo-color"
            data-img="5"
            data-text="5"
            data-ver="5"
            style="background-color: darkmagenta;"
          ></button>
        </div>

        <div class="swiper-slide" style="display: block;">
          <button
            class="circulo-color"
            data-img="6"
            data-text="6"
            data-ver="6"
            style="background-color: darkgreen;"
          ></button>
        </div>
      </div>
      <div class="arr">
        <div class="swiper-button-next"></div>
      </div>
      <div class="arr2">
        <div class="swiper-button-prev"></div>
      </div>
    </div>
  </body>
</html>