|
|
|
|
|
|
|
|
|
|
|
|
tisdag 3 mars 2026 VECKA 10
|
|
|
|
|
Artificiell Intelligens ALLA TAGGAR
|
|
|
|
|
|
|
|
|
// bildspel.js
(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 intervalRaw = parseFloat(container.dataset.interval ?? 2.5) * 1000;
const interval = Math.max(intervalRaw, fadeDuration + 200);
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);
}
// Vänta tills hela DOM:en är laddad
document.addEventListener("DOMContentLoaded", () => {
document.querySelectorAll("div.bildspel").forEach(container => {
const maxDelay = parseFloat(container.dataset.maxdelay ?? 2) * 1000;
setTimeout(() => initSlideshow(container), Math.random() * maxDelay);
});
});
})();