document.addEventListener('DOMContentLoaded', function() { const slider = document.querySelector('#home-carousel'); if (slider) { // Force load all backgrounds (including clones) function loadAllBackgrounds() { const lazyBgs = slider.querySelectorAll('.vcv-lozad[data-background-image]'); lazyBgs.forEach(function(element) { const bgImage = element.getAttribute('data-background-image'); if (bgImage && !element.hasAttribute('data-loaded')) { element.style.backgroundImage = 'url("' + bgImage + '")'; element.setAttribute('data-loaded', 'true'); } }); } // Load immediately loadAllBackgrounds(); // Re-check after Slick creates clones (after init) setTimeout(loadAllBackgrounds, 500); // Hide slider during infinite loop transition const slickElement = slider.querySelector('.slick-slider'); if (slickElement && typeof jQuery !== 'undefined') { jQuery(slickElement).on('beforeChange', function(event, slick, currentSlide, nextSlide) { loadAllBackgrounds(); // Detect infinite loop transitions const isInfiniteLoopTransition = (currentSlide === 0 && nextSlide === slick.slideCount - 1) || (currentSlide === slick.slideCount - 1 && nextSlide === 0); if (isInfiniteLoopTransition) { // Briefly fade out during the clone swap slickElement.style.opacity = '0'; slickElement.style.transition = 'opacity 0.15s ease-out'; } }); jQuery(slickElement).on('afterChange', function(event, slick, currentSlide) { loadAllBackgrounds(); // Give VC time to apply classes, then fade back in setTimeout(function() { slickElement.style.opacity = '1'; slickElement.style.transition = 'opacity 0.2s ease-in'; }, 50); // Wait 100ms for VC to finish applying classes }); } } });