cosmopet-architecture/wp-content/themes/cosmopet/static/js/new-front-page.js

document.addEventListener('DOMContentLoaded', function() {
    // Main slider
    const mainSwiper = new Swiper('.main-slider', {
        effect: 'fade',
        fadeEffect: { crossFade: true },
        autoplay: { delay: 5000, disableOnInteraction: false },
        loop: true
    });

    // Ingredients slider
    const swiper = new Swiper('.ingredients-swiper', {
        slidesPerView: 5,
        centeredSlides: true,
        centeredSlidesBounds: true,
        loop: true,
        autoplay: {
            delay: 4000,
            disableOnInteraction: false,
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        watchSlidesProgress: true,
        slideToClickedSlide: true,
        effect: 'slide',
        speed: 800,
        on: {
            init() {
                updateSlideStates(this);
            },
            slideChange() {
                updateSlideStates(this);
            },
        }
    });

        function updateSlideStates(swiper) {
        const slides = swiper.slides;
        
        slides.forEach((slide) => {
            slide.style.opacity = '0.3';
            slide.style.transform = 'scale(0.7)';
            slide.style.zIndex = '1';
        });

        // Найдём активный слайд по классу
        const activeSlide = [...slides].find((s) => s.classList.contains('swiper-slide-active'));
        if (!activeSlide) return;

        // Обнулим все
        const updateSlide = (slide, scale, opacity, zIndex) => {
            if (slide) {
                slide.style.transform = `scale(${scale})`;
                slide.style.opacity = opacity;
                slide.style.zIndex = zIndex;
            }
        };

        updateSlide(activeSlide, 1, 1, 10);

        // Пройдем от активного — назад и вперёд
        const getPrev = (el, n) => {
            let node = el;
            for (let i = 0; i < n; i++) {
                node = node.previousElementSibling || swiper.slides[swiper.slides.length - 1];
            }
            return node;
        };

        const getNext = (el, n) => {
            let node = el;
            for (let i = 0; i < n; i++) {
                node = node.nextElementSibling || swiper.slides[0];
            }
            return node;
        };

        updateSlide(getPrev(activeSlide, 1), 0.85, 0.6, 6);
        updateSlide(getPrev(activeSlide, 2), 0.75, 0.4, 4);

        updateSlide(getNext(activeSlide, 1), 0.85, 0.6, 6);
        updateSlide(getNext(activeSlide, 2), 0.75, 0.4, 4);
    }

});