Swiper Slide Content Sync

:root { --bg: #0b0b0b; --muted: #929292; --accent: #1e90ff; } body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; background: var(--bg); color: #fff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .container { max-width: 980px; margin: 40px auto; padding: 0 16px; } .blog-wrapper { display: grid; gap: 20px; } .blog-content { background: rgba(255,255,255,0.03); padding: 18px; border-radius: 8px; } .h3.title { margin: 0 0 8px 0; font-size: 18px; text-transform: uppercase; } .text.anons { margin: 0 0 12px 0; color: var(--muted); line-height: 1.4; } .text.news-link { color: var(--accent); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; } .swiper-blog-index { overflow-x: auto; padding: 8px 0; } .swiper-wrapper { display: flex; gap: 12px; align-items: stretch; } .swiper-slide { min-width: 300px; max-width: 360px; background: rgba(255,255,255,0.02); border-radius: 6px; overflow: hidden; flex: 0 0 auto; } .swiper-slide img { display: block; width: 100%; height: 180px; object-fit: cover; } // Sync visible/active slide data-title, data-anons and link into the main blog-content area. // Works with native scrollable slider or with Swiper (detects .swiper-slide-active class changes). const SELECTORS = { container: '.swiper-blog-index', slide: '.swiper-blog-index .swiper-slide', mainTitle: '.blog-content .h3.title', mainAnons: '.blog-content .text.anons', mainLink: '.blog-content a.news-link', slideLink: 'a.news-link' }; const elements = { container: document.querySelector(SELECTORS.container), slides: Array.from(document.querySelectorAll(SELECTORS.slide)), mainTitle: document.querySelector(SELECTORS.mainTitle), mainAnons: document.querySelector(SELECTORS.mainAnons), mainLink: document.querySelector(SELECTORS.mainLink) }; if (!elements.container || elements.slides.length === 0 || !elements.mainTitle) { // required elements missing - nothing to do return; } let lastActive = null; let rafScheduled = false; function updateFromSlide(slide) { if (!slide) return; const title = slide.dataset.title || ''; const anons = slide.dataset.anons || ''; const slideLinkEl = slide.querySelector(SELECTORS.slideLink); const href = slideLinkEl ? slideLinkEl.getAttribute('href') || '' : ''; // Only update if changed to reduce DOM writes if (lastActive !== slide) { elements.mainTitle.textContent = title; elements.mainAnons.textContent = anons; if (href) elements.mainLink.setAttribute('href', href); lastActive = slide; } } // 1) Try to detect Swiper active slide by watching class changes (swiper-slide-active) function setupMutationObserver() { const observer = new MutationObserver(mutations => { for (const m of mutations) { if (m.type === 'attributes' && m.attributeName === 'class') { const target = m.target; if (target.classList && target.classList.contains('swiper-slide-active')) { updateFromSlide(target); return; } } } }); elements.slides.forEach(slide => { observer.observe(slide, { attributes: true, attributeFilter: ['class'] }); }); } // 2) Fallback: compute most visible slide inside the container (works on native scroll or continuous slider) function getVisibleArea(rectA, rectB) { const overlapWidth = Math.max(0, Math.min(rectA.right, rectB.right) - Math.max(rectA.left, rectB.left)); const overlapHeight = Math.max(0, Math.min(rectA.bottom, rectB.bottom) - Math.max(rectA.top, rectB.top)); return overlapWidth * overlapHeight; } function computeMostVisibleSlide() { const containerRect = elements.container.getBoundingClientRect(); let best = null; let bestArea = 0; elements.slides.forEach(slide => { const r = slide.getBoundingClientRect(); const area = getVisibleArea(r, containerRect); if (area > bestArea) { bestArea = area; best = slide; } }); // require some minimal visibility to switch if (best && bestArea > 0) updateFromSlide(best); } function scheduleComputeMostVisibleSlide() { if (rafScheduled) return; rafScheduled = true; requestAnimationFrame(() => { computeMostVisibleSlide(); rafScheduled = false; }); } function setupScrollAndResizeListeners() { // container might be scrollable horizontally elements.container.addEventListener('scroll', scheduleComputeMostVisibleSlide, { passive: true }); window.addEventListener('resize', scheduleComputeMostVisibleSlide); // also observe DOM changes (slides may be added/removed) new MutationObserver(scheduleComputeMostVisibleSlide).observe(elements.container, { childList: true, subtree: true }); } // 3) If Swiper library exists and there is an instance, try to hook into it. // This is optional and non-fatal if not available. function tryHookSwiper() { try { // If the page creates Swiper instances globally, detect common patterns: // - window.swiper // - window.mySwiper // - elements.container.swiper (attached by some Swiper versions) const possible = [ window.swiper, window.mySwiper, elements.container.swiper ]; for (const s of possible) { if (s && typeof s.on === 'function') { s.on('slideChange transitionEnd', () => { const activeIndex = s.activeIndex; const slide = elements.slides[activeIndex] || elements.container.querySelector('.swiper-slide-active'); if (slide) updateFromSlide(slide); else scheduleComputeMostVisibleSlide(); }); // set initial const initial = elements.container.querySelector('.swiper-slide-active') || elements.slides[s.activeIndex]; if (initial) updateFromSlide(initial); return true; } } } catch (e) { // noop } return false; } // initial population: prefer explicit active slide (.swiper-slide-active), else compute most visible (function init() { const activeByClass = elements.container.querySelector('.swiper-slide-active'); if (activeByClass) { updateFromSlide(activeByClass); } else { scheduleComputeMostVisibleSlide(); } // setup observers/listeners setupMutationObserver(); setupScrollAndResizeListeners(); tryHookSwiper(); })();