Swiper — Fullscreen Viewer

:root { --overlay-bg: rgba(0, 0, 0, 0.95); --btn-size: 40px; --z: 9999; } html, body { height: 100%; margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; } .container { padding: 16px; max-width: 1100px; margin: 0 auto; } .swiper-main { width: 100%; height: 360px; background: #f5f5f5; } .swiper-main .swiper-slide { display: flex; align-items: center; justify-content: center; cursor: zoom-in; } .swiper-main img { max-width: 100%; max-height: 100%; display: block; object-fit: contain; user-select: none; -webkit-user-drag: none; } /* Fullscreen overlay */ .fullscreen-overlay { position: fixed; inset: 0; background: var(--overlay-bg); z-index: var(--z); display: flex; flex-direction: column; align-items: center; justify-content: center; } .hidden { display: none; } .fs-topbar { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; align-items: center; gap: 8px; justify-content: space-between; pointer-events: auto; } .fs-btn { width: var(--btn-size); height: var(--btn-size); border-radius: 6px; border: none; background: rgba(255,255,255,0.08); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 18px; } .fs-btn:active { transform: scale(0.98); } .fs-title { color: #fff; font-size: 14px; opacity: 0.9; flex: 1; text-align: center; } .swiper-fullscreen { width: 100%; height: 100%; padding: 24px 40px; box-sizing: border-box; } .swiper-fullscreen .swiper-slide { display: flex; align-items: center; justify-content: center; } .swiper-fullscreen img { max-width: 100%; max-height: 100%; object-fit: contain; } /* navigation color for fullscreen */ .fs-prev, .fs-next, .main-prev, .main-next { color: #fff; } /* Prevent background scroll when fullscreen open */ body.no-scroll { overflow: hidden; } @media (max-width: 640px) { .swiper-main { height: 260px; } .fs-topbar { top: 6px; left: 6px; right: 6px; } } // Main logic: init main swiper and a fullscreen swiper that clones images const { Swiper } = window; document.addEventListener('DOMContentLoaded', () => { // Init main swiper const mainSwiper = new Swiper('.swiper-main', { spaceBetween: 10, navigation: { nextEl: '.main-next', prevEl: '.main-prev', }, slidesPerView: 1, centeredSlides: true, effect: 'slide', }); // Build fullscreen slides from main slides' image src const mainSlides = Array.from(document.querySelectorAll('.swiper-main .swiper-slide img')); const imageSrcs = mainSlides.map(img => img.getAttribute('src')); const fsWrapper = document.querySelector('.swiper-fullscreen .swiper-wrapper'); fsWrapper.innerHTML = imageSrcs.map(src => { return `

`; }).join(''); // Init fullscreen swiper const fullscreenSwiper = new Swiper('.swiper-fullscreen', { spaceBetween: 20, navigation: { nextEl: '.fs-next', prevEl: '.fs-prev', }, slidesPerView: 1, centeredSlides: true, keyboard: { enabled: true, onlyInViewport: false, }, // enable touch interactions }); // Elements const overlay = document.getElementById('fullscreen-overlay'); const btnClose = document.getElementById('fs-close'); const btnToggle = document.getElementById('fs-toggle'); // Open fullscreen overlay at chosen index function openOverlay(index) { overlay.classList.remove('hidden'); document.body.classList.add('no-scroll'); // Ensure Swiper updates sizes then jump to index setTimeout(() => { fullscreenSwiper.update(); fullscreenSwiper.slideTo(index, 0); }, 50); } function closeOverlay() { overlay.classList.add('hidden'); document.body.classList.remove('no-scroll'); // exit native fullscreen if present if (document.fullscreenElement) { document.exitFullscreen().catch(() => {}); } } // Attach click on main slides to open overlay const mainSlideEls = Array.from(document.querySelectorAll('.swiper-main .swiper-slide')); mainSlideEls.forEach((slideEl, idx) => { slideEl.addEventListener('click', (e) => { // prefer clicking the image only openOverlay(idx); }); }); // Close button btnClose.addEventListener('click', (e) => { e.stopPropagation(); closeOverlay(); }); // Click outside slide (overlay background) closes overlay overlay.addEventListener('click', (e) => { // if click on overlay itself (not on inner swiper) const swiperEl = document.querySelector('.swiper-fullscreen'); if (!swiperEl.contains(e.target)) { closeOverlay(); } }); // Prevent closing when clicking inside swiper document.querySelector('.swiper-fullscreen').addEventListener('click', (e) => { e.stopPropagation(); }); // Toggle native fullscreen for the overlay btnToggle.addEventListener('click', async () => { try { if (!document.fullscreenElement) { await overlay.requestFullscreen(); } else { await document.exitFullscreen(); } } catch (err) { // ignore } }); // Close overlay on Esc document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && !overlay.classList.contains('hidden')) { closeOverlay(); } }); // Keep fullscreen swiper in sync with main swiper when overlay opens via programmatic change mainSwiper.on('slideChange', () => { // if overlay open, update fullscreen position if (!overlay.classList.contains('hidden')) { const idx = mainSwiper.activeIndex; fullscreenSwiper.slideTo(idx, 200); } }); // Optional: when fullscreen swiper changes, update main swiper (so underlying page reflects) fullscreenSwiper.on('slideChange', () => { const idx = fullscreenSwiper.activeIndex; mainSwiper.slideTo(idx, 200); }); });