71 lines
2.3 KiB
JavaScript
71 lines
2.3 KiB
JavaScript
// =============================================
|
|
// Galerie-Karussell (Startseite)
|
|
// Diese Datei steuert die Foto-Galerie mit Pfeilen.
|
|
// =============================================
|
|
|
|
// Wichtige Elemente aus dem HTML holen.
|
|
const carouselTrack = document.querySelector('.gallery__track');
|
|
const prevArrow = document.querySelector('.gallery__arrow--prev');
|
|
const nextArrow = document.querySelector('.gallery__arrow--next');
|
|
|
|
// Nur ausfuehren, wenn die Galerie auf der Seite vorhanden ist.
|
|
if (carouselTrack) {
|
|
// Alle einzelnen Karten/Bilder im Track sammeln.
|
|
const items = Array.from(carouselTrack.querySelectorAll('.gallery__item'));
|
|
|
|
// Auf Mobile zeigen wir 1 Bild, auf Desktop 3 Bilder pro "Seite".
|
|
const getItemsPerPage = () => (window.matchMedia('(max-width: 900px)').matches ? 1 : 3);
|
|
let itemsPerPage = getItemsPerPage();
|
|
const pageCount = Math.ceil(items.length / itemsPerPage);
|
|
let activePage = 0;
|
|
|
|
// Scrollt den Track auf eine bestimmte Seite.
|
|
function scrollToPage(page) {
|
|
activePage = page;
|
|
const pageWidth = carouselTrack.clientWidth;
|
|
carouselTrack.scrollTo({ left: pageWidth * page, behavior: 'smooth' });
|
|
}
|
|
|
|
// Geht zur naechsten Seite (mit Wrap-around am Ende).
|
|
function showNext() {
|
|
activePage = (activePage + 1) % pageCount;
|
|
scrollToPage(activePage);
|
|
}
|
|
|
|
// Geht zur vorherigen Seite (mit Wrap-around zum Ende).
|
|
function showPrev() {
|
|
activePage = (activePage - 1 + pageCount) % pageCount;
|
|
scrollToPage(activePage);
|
|
}
|
|
|
|
// Wenn sich bei Resize die Karten-Anzahl pro Seite aendert,
|
|
// laden wir die Seite neu, damit Layout und Seitenzahl wieder stimmen.
|
|
function refreshCarousel() {
|
|
const responsiveItemsPerPage = getItemsPerPage();
|
|
if (responsiveItemsPerPage !== itemsPerPage) {
|
|
itemsPerPage = responsiveItemsPerPage;
|
|
window.location.reload();
|
|
}
|
|
}
|
|
|
|
// Klick-Steuerung der Pfeile.
|
|
if (nextArrow) nextArrow.addEventListener('click', showNext);
|
|
if (prevArrow) prevArrow.addEventListener('click', showPrev);
|
|
|
|
// Tastatur-Support fuer Barrierefreiheit.
|
|
document.addEventListener('keydown', (event) => {
|
|
if (event.key === 'ArrowRight') {
|
|
showNext();
|
|
}
|
|
if (event.key === 'ArrowLeft') {
|
|
showPrev();
|
|
}
|
|
});
|
|
|
|
// Reagiert auf Bildschirmgroessen-Aenderungen.
|
|
window.addEventListener('resize', () => {
|
|
refreshCarousel();
|
|
scrollToPage(activePage);
|
|
});
|
|
}
|