Category: Blog

document.addEventListener('DOMContentLoaded', () => { const carousels = document.querySelectorAll('[data-splide-lazy-init="1"]'); if (!carousels.length) return; const getOptions = (el) => { const raw = el.getAttribute('data-splide-options'); if (!raw) return {}; try { return JSON.parse(raw); } catch (e) { console.warn('[Splide lazy-init] Invalid data-splide-options JSON:', el, e); return {}; } }; const mountSafely = (splide, options) => { // Only mount AutoScroll when THIS carousel has autoScroll enabled const extRoot = window.splide?.Extensions || window.Splide?.Extensions; const autoScrollExt = extRoot?.AutoScroll; if (options.autoScroll && autoScrollExt) { splide.mount({ AutoScroll: autoScrollExt }); } else { splide.mount(); } }; const initSplide = (el) => { // Prevent double init (Bricks often adds this class when it initialises) if (el.classList.contains('is-initialized')) return; // Prevent double init from this script if (el.dataset.splideInited === '1') return; el.dataset.splideInited = '1'; const options = getOptions(el); const splide = new Splide(el, options); mountSafely(splide, options); }; const observer = new IntersectionObserver((entries, obs) => { entries.forEach(entry => { if (!entry.isIntersecting) return; initSplide(entry.target); obs.unobserve(entry.target); }); }, { rootMargin: '200px', }); carousels.forEach(el => observer.observe(el)); });