let sw;
$(window).on('resize', function(){
if (sw) {
document.querySelector(".hero__fullsize").innerHTML= "";
}
if ($(window).width() > 1024) {
const heroEl = document.querySelector(".hero");
const fullSizeWrapEl = heroEl.querySelector(".hero__fullsize");
const contentEls = heroEl.querySelectorAll(".swiper .content");
const links = [
"rea",
"med",
"privod",
];
const contentFullsizeEls = Array.from(contentEls, (el, index) => {
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");
const anchorElement = document.createElement("a");
anchorElement.href = links[index];
anchorElement.style.color = "inherit";
anchorElement.style.display = "block";
while (clone.firstChild) {
anchorElement.appendChild(clone.firstChild);
}
clone.appendChild(anchorElement);
return clone;
});
contentFullsizeEls.forEach((el) => fullSizeWrapEl.appendChild(el));
const state = {
topContent: null,
bottomContent: null
};
function slideChange(swiper) {
const contentIndex = $(swiper.$el.find('.swiper-wrapper .swiper-slide')[swiper.activeIndex])
.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;
}
sw = new Swiper(".hero__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
},
})
} else {
new Swiper(".hero-swiper", {
slidesPerView: 1,
loop: true,
pagination: {
el: ".swiper-pagination",
type: "fraction",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
}}).trigger('resize');