kris_1220

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 });
}