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; } // Apply blur to all slides $('.center-carousel .swiper-slide').css({ 'transform': 'scale(0.75)', 'opacity': '0.5', 'padding': '0', 'transition': 'transform 0.4s ease, opacity 0.3s ease, filter 0.3s ease', 'filter': 'blur(4px)' // <-- left/right slides are blurred }); // Highlight the center slide $('.center-carousel .swiper-slide').eq(targetIndex).css({ 'transform': 'scale(1)', 'opacity': '1', 'z-index': '2', 'padding': '0 0px', 'filter': 'none' // <-- active slide is clear }); } 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'); } });