Переключение слайдов внутри слайдера

В секции 6 табов, внутри которых свои самостоятельные слайдеры (swiper). при нажатии на какой-то таб должен открываться свой слайдер. В целом идея реализована, но стрелки живут своей жизнью: то работают при нажатии, то нет. бесконечное перелистывание включено. сами слайдеры работают, потому что если листать слайды просто их смахивая, то слайды меняются. Кстати, если я смахиваю слайды вручную, то после этого стрелки начинают работать. Однако стоит переключиться на любую другую вкладку, то снова провал. Стандартные стрелки swiper отключены, использую свои картинки. Пробовал иные слайдеры (slick, owl-carousel) - результат тот же. Пробовал обновлять слайдер (update() ) - не помогло. что я делаю не так, на что обратить внимание?

<ul class="expert-links">
      <li class="expert-item">
        <a href="#tab-1" class="expert-link tab-link is-active"
          ></a
        >
      </li>
      <li class="expert-item">
        <a href="#tab-2" class="expert-link tab-link"></a>
      </li>
      <li class="expert-item">
        <a href="#tab-3" class="expert-link tab-link"
          ></a
        >
      </li>
      <li class="expert-item">
        <a href="#tab-4" class="expert-link tab-link"></a>
      </li>
      <li class="expert-item">
        <a href="#tab-5" class="expert-link tab-link"></a>
      </li>
      <li class="expert-item">
        <a href="#tab-6" class="expert-link tab-link"></a>
      </li>
    </ul>

    <div class="expert-computer">
      <img src="img/expert/macbook.png" alt="" class="expert-macbook" />
      <div class="expert-wrapper">

        <div class="expert-tab" id="tab-1">
          <div class="swiper extra">
            <div class="swiper-wrapper">
              <div class="swiper-slide expert-slide">
                слайд1
              </div>
              <div class="swiper-slide expert-slide">
                слайд2
              </div>
            </div>
          </div>
          <div class="swiper-navigation">
            <div class="swiper-button-prev">
              <img
                class="swiper-custom-prev"
                src="icons/expert/arrow-prev.png"
                alt=""
              />
            </div>
            <div class="swiper-button-next">
              <img
                class="swiper-custom-next"
                src="icons/expert/arrow-next.png"
                alt=""
              />
            </div>
          </div>
        </div>

        
        остальные элементы с классом expert-tab выстроены идентично (меняются только id)
    </div>

js

const swiper1 = new Swiper(".extra", {
  direction: "horizontal",
  effect: "fade",
  loop: true,
  slidesPerView: 1,
  observer: true,
  observeParents: true,
  pagination: {
    el: ".swiper-pagination",
  },
  navigation: {
    nextEl: ".swiper-custom-next",
    prevEl: ".swiper-custom-prev",
  },
});

document.addEventListener("DOMContentLoaded", function () {
  showTab("tab-1");

  document.querySelectorAll(".tab-link").forEach(function (link) {
    link.addEventListener("click", function (event) {
      event.preventDefault();
      let tabId = this.getAttribute("href").substr(1);
      showTab(tabId);
    });
  });
});

function showTab(tabId) {
  document.querySelectorAll(".expert-tab").forEach(function (tab) {
    if (tab.id === tabId) {
      tab.style.display = "block";
    } else {
      tab.style.display = "none";
    }
  });

  document.querySelectorAll(".tab-link").forEach(function (link) {
    link.classList.remove("is-active");
  });

  document
    .querySelector(`.tab-link[href="#${tabId}"]`)
    .classList.add("is-active");
}