Ошибка Uncaught TypeError: Cannot read properties of undefined (reading 'find'). Как можно поправить?

Question

[kris_1220]

Не знаю как поправить функцию. Умные люди, подскажите пожалуйста)

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

Comments

[Hovo_Varosyan]

проверь swiper и наличие его class в момент вызова, может оно у тебя undefined?

[kris_1220]

Hovo_Varosyan, class есть и swiper подключен. Один swiper работает нормально, а этот выдает ошибку. Вот весь код swiper:

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

[Hovo_Varosyan]

kris_1220, можешь сделать function slideChange(swiper) {
console.log(swiper) // нужно узнать что ты получаешь
const contentIndex = $(swiper.$el.find('.swiper-wrapper .swiper-slide')[swiper.activeIndex])
.data('swiper-slide-index');
и ещё ты используешь swiper.activeIndex но насколько понял из документации его используют для activeIndexChange а у тебя там realIndexChange нужно swiper.realIndex (я не уверен, мало работал с swiper )

Answer 1

[catch-a-chalk]

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