86 lines
2.7 KiB
JavaScript
86 lines
2.7 KiB
JavaScript
const carouselTrack = document.querySelector('.gallery__track');
|
|
const prevArrow = document.querySelector('.gallery__arrow--prev');
|
|
const nextArrow = document.querySelector('.gallery__arrow--next');
|
|
const dotsContainer = document.querySelector('.gallery__dots');
|
|
|
|
if (carouselTrack) {
|
|
const items = Array.from(carouselTrack.querySelectorAll('.gallery__item'));
|
|
const getItemsPerPage = () => (window.matchMedia('(max-width: 900px)').matches ? 1 : 3);
|
|
let itemsPerPage = getItemsPerPage();
|
|
let pageCount = Math.ceil(items.length / itemsPerPage);
|
|
let activePage = 0;
|
|
var dots = [];
|
|
|
|
function buildDots() {
|
|
if (!dotsContainer) return;
|
|
dotsContainer.innerHTML = '';
|
|
dots = [];
|
|
for (var i = 0; i < pageCount; i++) {
|
|
var dot = document.createElement('button');
|
|
dot.type = 'button';
|
|
dot.className = 'gallery__dot' + (i === activePage ? ' gallery__dot--active' : '');
|
|
dot.setAttribute('role', 'tab');
|
|
dot.setAttribute('aria-selected', i === activePage ? 'true' : 'false');
|
|
dot.setAttribute('aria-label', 'Seite ' + (i + 1) + ' von ' + pageCount);
|
|
dot.dataset.page = i;
|
|
dot.addEventListener('click', function() {
|
|
goToPage(parseInt(this.dataset.page));
|
|
});
|
|
dotsContainer.appendChild(dot);
|
|
dots.push(dot);
|
|
}
|
|
}
|
|
|
|
function updateDots() {
|
|
dots.forEach(function(dot, i) {
|
|
dot.classList.toggle('gallery__dot--active', i === activePage);
|
|
dot.setAttribute('aria-selected', i === activePage ? 'true' : 'false');
|
|
});
|
|
}
|
|
|
|
function updateTrack() {
|
|
var gap = parseFloat(getComputedStyle(carouselTrack).gap) || 20;
|
|
var itemWidth = items[0].getBoundingClientRect().width;
|
|
var offset = activePage * (itemWidth + gap) * itemsPerPage;
|
|
carouselTrack.style.transform = 'translateX(-' + offset + 'px)';
|
|
carouselTrack.style.transition = 'transform 0.4s ease';
|
|
updateDots();
|
|
}
|
|
|
|
function goToPage(page) {
|
|
activePage = page;
|
|
updateTrack();
|
|
}
|
|
|
|
function showNext() {
|
|
activePage = (activePage + 1) % pageCount;
|
|
updateTrack();
|
|
}
|
|
|
|
function showPrev() {
|
|
activePage = (activePage - 1 + pageCount) % pageCount;
|
|
updateTrack();
|
|
}
|
|
|
|
buildDots();
|
|
|
|
if (nextArrow) nextArrow.addEventListener('click', showNext);
|
|
if (prevArrow) prevArrow.addEventListener('click', showPrev);
|
|
|
|
document.addEventListener('keydown', function(event) {
|
|
if (event.key === 'ArrowRight') showNext();
|
|
if (event.key === 'ArrowLeft') showPrev();
|
|
});
|
|
|
|
window.addEventListener('resize', function() {
|
|
var newPerPage = getItemsPerPage();
|
|
if (newPerPage !== itemsPerPage) {
|
|
itemsPerPage = newPerPage;
|
|
pageCount = Math.ceil(items.length / itemsPerPage);
|
|
activePage = 0;
|
|
}
|
|
buildDots();
|
|
updateTrack();
|
|
});
|
|
}
|