Почему не отображается первый слайдер?

Question

[kris_1220]

Помогите понять почему не показывается первый слайдер? Я понимаю, что он скрыт, но как его сделать видимым - не понятно. Сам сайт https://castplast.ru/

const PrintSwiper = new Swiper('.swiper__print', {
  slidesPerView: 3,
  centeredSlides: true,
  spaceBetween: 30,
  loop: true,
  pagination: {
    el: ".swiper-pagination",
    type: "fraction",
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});


const heroEl = document.querySelector(".hero");
const fullSizeWrapEl = heroEl.querySelector(".hero__fullsize");
const contentEls = heroEl.querySelectorAll(".swiper .content");
const contentFullsizeEls = Array.from(contentEls, (el) => {
  const clone = el.cloneNode(true);
  Splitting({ target: clone, by: "words" });
  clone.classList.add(
    "hero__content",
    "hero__content--hidden",
    "content--hero"
  );
  clone.classList.remove("content--slide");
  return clone;
});

contentFullsizeEls.forEach((el) => fullSizeWrapEl.appendChild(el));

const state = {
  topContent: null,
  bottomContent: null
};

function slideChange(swiper) {
  const activeSlide = swiper.slides[swiper.activeIndex];
  const contentIndex = activeSlide.getAttribute('data-swiper-slide-index');

  const content = contentFullsizeEls[contentIndex];

  if (!content) return;

  if (state.bottomContent) {
      state.bottomContent.classList.remove("hero__content--bottom");
      state.bottomContent.classList.add("hero__content--hidden");
  }

  if (state.topContent) {
      state.topContent.classList.remove("hero__content--top");
      state.topContent.classList.add("hero__content--hidden");
  }

  state.bottomContent = state.topContent;
  state.topContent = content;

  const slidetRect = swiper.slides[swiper.activeIndex].getBoundingClientRect();
  const parentRect = heroEl.getBoundingClientRect();

  content.style.transition = "none";
  content.style.left = slidetRect.left - parentRect.left + "px";
  content.style.top = slidetRect.top - parentRect.top + "px";
  content.style.width = slidetRect.width + "px";
  content.style.height = slidetRect.height + "px";
  content.style.borderRadius = "var(--border-radius, 0)";

  content.getBoundingClientRect();

  content.classList.remove("hero__content--hidden");
  content.classList.add("hero__content--top", "hero__content--grow");

  content.style.transition = "";
  content.style.left = "";
  content.style.top = "";
  content.style.width = "";
  content.style.height = "";
  content.style.borderRadius = "";

  const onShowTextEnd = (event) => {
      if (event.target !== event.currentTarget) {
          event.currentTarget.removeEventListener("transitionend", onShowTextEnd);
      }
  };

  const onGrowEnd = (event) => {
      event.currentTarget.classList.remove("hero__content--grow");
      event.currentTarget.classList.add("hero__content--show-text");
      event.currentTarget.addEventListener("transitionend", onShowTextEnd);
  };

  content.addEventListener("transitionend", onGrowEnd, { once: true });
}

function swiperInit(swiper) {
  const total = swiper.slides.length - swiper.loopedSlides * 2;
  const contentIndex = (swiper.activeIndex - swiper.loopedSlides) % total;

  const content = contentFullsizeEls[contentIndex];
  if (!content) return;

  content.classList.remove("hero__content--hidden");
  content.classList.add("hero__content--top");
  state.topContent = content;
}

const swiper = new Swiper(".swiper", {
  slidesPerView: 3.5,
  spaceBetween: 16,
  loop: true,
  speed: 300,
  simulateTouch: false,
  pagination: {
    el: ".swiper-pagination",
    type: "fraction",
},

  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev"
  },
  on: { realIndexChange: slideChange, init: swiperInit }
});