Centered Mode for Elementor

<script>
function initSwiperScripts() {
    if (window.matchMedia("(min-width: 768px)").matches) {
        jQuery(document).ready(function ($) {
            function updateCenterSlide() {
                let swiperElement = document.querySelector('.center-carousel .swiper');
 
                if (!swiperElement || !swiperElement.swiper) {
                    console.warn("Swiper instance not found. Retrying...");
                    setTimeout(updateCenterSlide, 500); // Retry after delay
                    return;
                }
 
                let swiperInstance = swiperElement.swiper;
                let totalSlides = swiperInstance.slides.length;
                let visibleSlides = swiperInstance.params.slidesPerView;
 
                let centerIndex = Math.floor(visibleSlides / 2);
                let activeIndex = swiperInstance.activeIndex;
                let targetIndex = activeIndex + centerIndex;
 
                if (targetIndex >= totalSlides) {
                    targetIndex = targetIndex - totalSlides;
                }
 
                $('.center-carousel .swiper-slide').css({
                    'transform': 'scale(0.75)',
                    
                    'padding': '0',
                    'transition': 'transform 0.4s ease, opacity 0.3s ease, filter 0.3s ease',
                    'filter': 'saturate(0.1) brightness(1) contrast(1)'
                });
 
                $('.center-carousel .swiper-slide').eq(targetIndex).css({
                    'transform': 'scale(1)',
                    
                    'z-index': '2',
                    'padding': '0 0px',
                    'filter': 'saturate(1) brightness(1) contrast(1.1)'
                });
            }
 
            function initSwiperEvents() {
                let swiperElement = document.querySelector('.center-carousel .swiper');
 
                if (swiperElement && swiperElement.swiper) {
                    swiperElement.swiper.on('slideChange', updateCenterSlide);
                    swiperElement.swiper.on('slideChangeTransitionEnd', updateCenterSlide);
 
                    // Run once when Swiper is ready
                    updateCenterSlide();
                } else {
                    console.warn("Swiper instance not initialized yet. Retrying...");
                    setTimeout(initSwiperEvents, 500); // Retry after delay
                }
            }
 
            // Run after a short delay to ensure Swiper is initialized
            setTimeout(initSwiperEvents, 1000);
        });
    }
}
 
// Initial check on page load
if (window.matchMedia("(min-width: 768px)").matches) {
    initSwiperScripts();
}
 
// Listen for window resize and reapply logic if needed
window.addEventListener('resize', function () {
    if (window.matchMedia("(min-width: 768px)").matches) {
        if (!document.body.classList.contains('swiper-initialized')) {
            document.body.classList.add('swiper-initialized');
            initSwiperScripts();
        }
    } else {
        document.body.classList.remove('swiper-initialized');
    }
});
</script>