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,
        spaceBetween: -40,
        centeredSlides: true,
        centeredSlidesBounds: true,
        loop: true,
        loopAdditionalSlides: 25, // 🔥 вот он!
        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.2';
                slide.style.transform = 'translateZ(-200px) scale(0.7)';
                slide.style.zIndex = '1';
            });

            const activeSlide = [...slides].find((s) => s.classList.contains('swiper-slide-active'));
            if (!activeSlide) return;

            const updateSlide = (slide, z, scale, opacity, zIndex) => {
                if (slide) {
                    slide.style.transform = `translateZ(${z}px) scale(${scale})`;
                    slide.style.opacity = opacity;
                    slide.style.zIndex = zIndex;
                }
            };

            updateSlide(activeSlide, 0, 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), -100, 0.85, 0.5, 6);
            updateSlide(getPrev(activeSlide, 2), -200, 0.75, 0.3, 4);

            updateSlide(getNext(activeSlide, 1), -100, 0.85, 0.5, 6);
            updateSlide(getNext(activeSlide, 2), -200, 0.75, 0.3, 4);
        }

// Specialists slider
    const specialistsSwiper = new Swiper('.main-specialists_wrapper', {
        slidesPerView: 3,
        spaceBetween: 20,
        loop: true,
        autoplay: {
             delay: 6000,
            disableOnInteraction: false,
        },
        navigation: {          
            prevEl: '.main-specialists .swiper-button-prev',
            nextEl: '.main-specialists .swiper-button-next',
        },
        pagination: {
            el: '.main-specialists .swiper-pagination',
            clickable: true,
        },
        breakpoints: {
            320: {
                slidesPerView: 1,
                spaceBetween: 10
            },
            768: {
                slidesPerView: 2,
                spaceBetween: 15
            },
            1024: {
                slidesPerView: 3,
                spaceBetween: 20
            }
        }
    });

    // food slider

    const reviewsSwiper = new Swiper('.main-food_reviews-slider', {
        slidesPerView: 1,
        spaceBetween: 20,
        loop: false, // Отключаем loop
        autoplay: {
            delay: 5000,
            disableOnInteraction: false,
        },
        navigation: {
            nextEl: '.main-food_reviews .swiper-button-next',
            prevEl: '.main-food_reviews .swiper-button-prev',
        },
        on: {
            init: function () {
                updatePagination(this);
            },
            slideChange: function () {
                updatePagination(this);
            }
        }
    });

    function updatePagination(swiper) {
        const currentSlide = swiper.activeIndex + 1; // С 1
        const totalSlides = swiper.slides.length;
        const indexElement = document.querySelector('.main-food_reviews-slider-index');
        if (indexElement) {
            indexElement.textContent = `${currentSlide}/${totalSlides}`;
        }
    }

    // reviews slider

    let market = new Swiper(".marketplace__swiper ", {
        slidesPerView: 'auto',
        spaceBetween: 13,
   
    });

    // treats slider

    const treatsSwiper = new Swiper('.main-treats_reviews-slider', {
        slidesPerView: 1,
        spaceBetween: 20,
        loop: false, // Отключаем loop
        autoplay: {
            delay: 5000,
            disableOnInteraction: false,
        },
        navigation: {
            nextEl: '.main-food_reviews .swiper-button-next',
            prevEl: '.main-food_reviews .swiper-button-prev',
        },
        on: {
            init: function () {
                updatePaginationTreats(this);
            },
            slideChange: function () {
                updatePaginationTreats(this);
            }
        }
    });

    function updatePaginationTreats(swiper) {
        const currentSlideTreats = swiper.activeIndex + 1; // С 1
        const totalSlidesTreats = swiper.slides.length;
        const indexElementTreats = document.querySelector('.main-treats_reviews-slider-index ');
        if (indexElementTreats) {
            indexElementTreats.textContent = `${currentSlideTreats}/${totalSlidesTreats}`;
        }
    }

    // smi slider

    let smigSlider = new Swiper(".smiSlider", {
        slidesPerView: 3.3,
        spaceBetween: 40,
        navigation: {
            nextEl: '.smiSlider-next',
            prevEl: '.smiSlider-prev'
        },
        breakpoints: {
            300: {
                slidesPerView: 1.3,
                spaceBetween: 20,
            },
            776: {
                slidesPerView: 1.3,
                spaceBetween: 40,
            },
            991: {
                slidesPerView: 2.4,
                spaceBetween: 40,
            },
            1400: {
                slidesPerView: 2.8,
                spaceBetween: 40,
            },
        }
    });

});