title: Duplicate slides do not behave correctly
body: <p>If you look at the behavior of the slider below, when the slides change (it can be by clicking the arrows, the circles, or scrolling), the <code>.active</code> class is applied to the circle in the middle.
  If you move to a certain point (if you go to the right, you see the error when you get to the red circle. If you go to the left you see the error in the green circle) you will notice that the active class is not applied correctly, because the library <code>swiperJS</code> creates duplicate slides (you could to see this with the browser's inspector) and they don't behave as expected.</p>
  <p>Does anyone know how to make my <code>js</code> apply to duplicate slides as well?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> // 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("&amp;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&gt;.circulo-color").click();
        },
  
        init: function () {
          $(document).on("ready", function () {
            $(".swiper-slide-active&gt;.circulo-color").click();
          });
        }
      }
    });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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)
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="UTF-8" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="ie=edge" /&gt;
      &lt;title&gt;Static Template&lt;/title&gt;
  
      &lt;link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css" /&gt;
      &lt;link
        rel="stylesheet"
        href="https://unpkg.com/swiper/swiper-bundle.min.css"
      /&gt;
      &lt;script
        src="https://code.jquery.com/jquery-3.6.0.min.js"
        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
        crossorigin="anonymous"
      &gt;&lt;/script&gt;
      &lt;script src="https://unpkg.com/swiper/swiper-bundle.js"&gt;&lt;/script&gt;
      &lt;script src="https://unpkg.com/swiper/swiper-bundle.min.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div class="swiper-container colores"&gt;
        &lt;div class="swiper-wrapper"&gt;
          &lt;div class="swiper-slide" style="display: block;"&gt;
            &lt;button
              class="circulo-color"
              data-img="1"
              data-text="1"
              data-ver="1"
              style="background-color: red;"
            &gt;&lt;/button&gt;
          &lt;/div&gt;
  
          &lt;div class="swiper-slide" style="display: block;"&gt;
            &lt;button
              class="circulo-color"
              data-img="2"
              data-text="2"
              data-ver="2"
              style="background-color: yellow;"
            &gt;&lt;/button&gt;
          &lt;/div&gt;
  
          &lt;div class="swiper-slide" style="display: block;"&gt;
            &lt;button
              class="circulo-color"
              data-img="3"
              data-text="3"
              data-ver="3"
              style="background-color: blue;"
            &gt;&lt;/button&gt;
          &lt;/div&gt;
  
          &lt;div class="swiper-slide" style="display: block;"&gt;
            &lt;button
              class="circulo-color"
              data-img="4"
              data-text="4"
              data-ver="4"
              style="background-color: teal;"
            &gt;&lt;/button&gt;
          &lt;/div&gt;
  
          &lt;div class="swiper-slide" style="display: block;"&gt;
            &lt;button
              class="circulo-color"
              data-img="5"
              data-text="5"
              data-ver="5"
              style="background-color: darkmagenta;"
            &gt;&lt;/button&gt;
          &lt;/div&gt;
  
          &lt;div class="swiper-slide" style="display: block;"&gt;
            &lt;button
              class="circulo-color"
              data-img="6"
              data-text="6"
              data-ver="6"
              style="background-color: darkgreen;"
            &gt;&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="arr"&gt;
          &lt;div class="swiper-button-next"&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="arr2"&gt;
          &lt;div class="swiper-button-prev"&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>