52 lines
1.5 KiB
JavaScript
52 lines
1.5 KiB
JavaScript
// =============================================
|
|
// Mini-Galerie auf der Landingpage
|
|
// Diese Datei hebt immer ein Bild hervor und
|
|
// erlaubt Navigation mit Pfeilen/Tastatur.
|
|
// =============================================
|
|
|
|
// Elemente aus dem DOM lesen.
|
|
const prevBtn = document.querySelector('.arrow--prev');
|
|
const nextBtn = document.querySelector('.arrow--next');
|
|
const items = Array.from(document.querySelectorAll('.gallery__item'));
|
|
let activeIndex = 0;
|
|
|
|
// Aktualisiert die Darstellung aller Bilder:
|
|
// - aktives Bild ist klar sichtbar
|
|
// - inaktive Bilder sind abgeblendet
|
|
function updateGallery() {
|
|
items.forEach((item, i) => {
|
|
item.style.opacity = i === activeIndex ? '1' : '0.35';
|
|
item.style.transform = i === activeIndex ? 'scale(1)' : 'scale(0.95)';
|
|
});
|
|
}
|
|
|
|
// Ein Schritt nach rechts.
|
|
function showNext() {
|
|
if (!items.length) return;
|
|
activeIndex = (activeIndex + 1) % items.length;
|
|
updateGallery();
|
|
}
|
|
|
|
// Ein Schritt nach links.
|
|
function showPrev() {
|
|
if (!items.length) return;
|
|
activeIndex = (activeIndex - 1 + items.length) % items.length;
|
|
updateGallery();
|
|
}
|
|
|
|
// Event-Handler nur registrieren, wenn die Buttons existieren.
|
|
if (nextBtn) nextBtn.addEventListener('click', showNext);
|
|
if (prevBtn) prevBtn.addEventListener('click', showPrev);
|
|
|
|
// Tastatursteuerung fuer bessere Bedienbarkeit.
|
|
document.addEventListener('keydown', (event) => {
|
|
if (event.key === 'ArrowRight') {
|
|
showNext();
|
|
}
|
|
if (event.key === 'ArrowLeft') {
|
|
showPrev();
|
|
}
|
|
});
|
|
|
|
// Initialen Zustand einmal setzen.
|
|
updateGallery(); |