// bildspel.js // ============================================================================= // BILDSPEL - Automatiskt bildspel // - appliceras på alla div på sidan som har class=bildspel // ============================================================================= // ANVÄNDNING: // // 1. Lägg till scriptet i din HTML: // // // 2. Skapa en div med class="bildspel" och lägg bilder inuti: // // // 3. Anpassa med data-attribut på div:en (alla värden i sekunder): // // data-fade="0.6" Fade-tid (default: 0.6) // data-interval="2.5" Tid mellan bilder (default: 2.5) // data-easing="ease-in-out" CSS easing (default: ease-in-out) // data-maxdelay="2" Max slump-startfördröjning (default: 2) // data-width="40%" Bredd på bildspelet (default: 40%) // // EXEMPEL: // // ============================================================================= (function () { // Injicera CSS const style = document.createElement("style"); style.textContent = ` div.bildspel { width: var(--bildspel-width, 40%); } `; document.head.appendChild(style); function initSlideshow(container) { const images = Array.from(container.querySelectorAll("img")); if (images.length === 0) return; const fadeDuration = parseFloat(container.dataset.fade ?? 0.6) * 1000; const interval = parseFloat(container.dataset.interval ?? 2.5) * 1000; const easing = container.dataset.easing ?? "ease-in-out"; const maxDelay = parseFloat(container.dataset.maxdelay ?? 2) * 1000; const width = container.dataset.width ?? "40%"; container.style.setProperty("--bildspel-width", width); images.forEach((img, i) => { img.style.maxWidth = "100%"; img.style.display = i === 0 ? "block" : "none"; img.style.transition = `opacity ${fadeDuration/1000}s ${easing}`; img.style.opacity = i === 0 ? "1" : "0"; }); setInterval(() => { const visibleIndex = images.findIndex(img => img.style.display === "block"); const nextIndex = (visibleIndex + 1) % images.length; images[visibleIndex].style.opacity = "0"; setTimeout(() => { images[visibleIndex].style.display = "none"; images[nextIndex].style.display = "block"; setTimeout(() => images[nextIndex].style.opacity = "1", 20); }, fadeDuration); }, interval); } document.querySelectorAll("div.bildspel").forEach(container => { const maxDelay = parseFloat(container.dataset.maxdelay ?? 2) * 1000; setTimeout(() => initSlideshow(container), Math.random() * maxDelay); }); })();