(function () { function initSlider(container) { const config = JSON.parse(container.getAttribute("data-config")); let index = 0; let autoplayTimer; ``` const slides = container.querySelectorAll(".ws-slide"); const progress = container.querySelector(".ws-progress-bar"); function showSlide(i) { slides.forEach((s, idx) => { s.classList.remove("active", "kenburns"); if (idx === i) { s.classList.add("active"); if (config.kenBurns) { setTimeout(() => s.classList.add("kenburns"), 50); } } }); resetProgress(); } function nextSlide() { index = (index + 1) % slides.length; showSlide(index); } function prevSlide() { index = (index - 1 + slides.length) % slides.length; showSlide(index); } function startAutoplay() { if (config.autoplay) { autoplayTimer = setInterval(nextSlide, config.interval || 4000); animateProgress(); } } function stopAutoplay() { clearInterval(autoplayTimer); resetProgress(); } function animateProgress() { if (!progress) return; progress.style.transition = "none"; progress.style.width = "0%"; setTimeout(() => { progress.style.transition = `width ${config.interval || 4000}ms linear`; progress.style.width = "100%"; }, 50); } function resetProgress() { if (!progress) return; progress.style.transition = "none"; progress.style.width = "0%"; setTimeout(animateProgress, 50); } // Buttons container.querySelector(".ws-next").onclick = () => { nextSlide(); stopAutoplay(); startAutoplay(); }; container.querySelector(".ws-prev").onclick = () => { prevSlide(); stopAutoplay(); startAutoplay(); }; // Swipe with momentum feel let startX = 0; let currentX = 0; let isDragging = false; container.addEventListener("touchstart", e => { startX = e.touches[0].clientX; isDragging = true; stopAutoplay(); }); container.addEventListener("touchmove", e => { if (!isDragging) return; currentX = e.touches[0].clientX; }); container.addEventListener("touchend", () => { if (!isDragging) return; let diff = startX - currentX; if (diff > 50) nextSlide(); else if (diff < -50) prevSlide(); isDragging = false; startAutoplay(); }); // Pause on hover (desktop) container.addEventListener("mouseenter", stopAutoplay); container.addEventListener("mouseleave", startAutoplay); // Lightbox if (config.lightbox) { slides.forEach(slide => { slide.addEventListener("click", () => { const lb = document.createElement("div"); lb.className = "ws-lightbox"; lb.innerHTML = ``; lb.onclick = () => lb.remove(); document.body.appendChild(lb); }); }); } startAutoplay(); ``` } function buildSlider(el) { const config = JSON.parse(el.getAttribute("data-config")); ``` const wrapper = document.createElement("div"); wrapper.className = "ws-wrapper"; const slidesHTML = config.images.map((img, i) => { if (typeof img === "string") { return `

`; } else { return `

${img.caption || ""}

`; } }).join(""); wrapper.innerHTML = `

${slidesHTML}

❮ ❯ `; el.appendChild(wrapper); initSlider(el); ``` } function injectStyles() { const style = document.createElement("style"); style.innerHTML = ` .ws-wrapper { position: relative; overflow: hidden; } ``` .ws-slide { position: absolute; width: 100%; opacity: 0; transition: opacity 1s ease; } .ws-slide.active { opacity: 1; position: relative; z-index: 2; } .ws-slide img { width: 100%; transform: scale(1); transition: transform 6s ease; } .ws-slide.kenburns img { transform: scale(1.08); } .ws-caption { position: absolute; bottom: 20px; left: 20px; color: #fff; font-size: 16px; background: rgba(0,0,0,0.4); padding: 8px 12px; } .ws-prev, .ws-next { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.4); color: #fff; border: none; padding: 10px; cursor: pointer; z-index: 3; } .ws-prev { left: 10px; } .ws-next { right: 10px; } .ws-progress { position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background: rgba(255,255,255,0.2); } .ws-progress-bar { width: 0%; height: 100%; background: #fff; } .ws-lightbox { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.95); display: flex; align-items: center; justify-content: center; z-index: 9999; } .ws-lightbox img { max-width: 90%; max-height: 90%; } `; document.head.appendChild(style); ``` } document.addEventListener("DOMContentLoaded", () => { injectStyles(); document.querySelectorAll(".weeby-slider").forEach(buildSlider); }); })();

WATERSTONE KITCHEN

---