/* BELLYBIRD - Mobile Product Image Swipe */
(function () {
function initProductSwipe() {
if (window.innerWidth > 767) return;
document.querySelectorAll('[data-product-single-media-group]').forEach(function (gallery) {
if (gallery.dataset.swipeInitialized) return;
gallery.dataset.swipeInitialized = 'true';
var slides = Array.from(
gallery.querySelectorAll('.product-single__media')
);
if (slides.length < 2) return;
var startX = 0;
var startY = 0;
var endX = 0;
var dots = document.createElement('div');
dots.className = 'bellybird-gallery-dots';
slides.forEach(function (slide, index) {
var dot = document.createElement('button');
dot.type = 'button';
dot.className = 'bellybird-gallery-dot';
dot.setAttribute('aria-label', 'Bild ' + (index + 1));
dot.addEventListener('click', function () {
showSlide(index);
});
dots.appendChild(dot);
});
gallery.appendChild(dots);
function showSlide(index) {
index = Math.max(0, Math.min(index, slides.length - 1));
slides.forEach(function (slide, i) {
slide.style.display = i === index ? '' : 'none';
});
Array.from(dots.children).forEach(function (dot, i) {
dot.classList.toggle('active', i === index);
});
currentIndex = index;
}
var currentIndex = 0;
showSlide(0);
gallery.addEventListener('touchstart', function (event) {
startX = event.touches[0].clientX;
startY = event.touches[0].clientY;
}, { passive: true });
gallery.addEventListener('touchend', function (event) {
endX = event.changedTouches[0].clientX;
var diffX = endX - startX;
var diffY = event.changedTouches[0].clientY - startY;
if (Math.abs(diffX) > 45 && Math.abs(diffX) > Math.abs(diffY)) {
if (diffX < 0) {
showSlide(currentIndex + 1);
} else {
showSlide(currentIndex - 1);
}
}
}, { passive: true });
});
}
document.addEventListener('DOMContentLoaded', initProductSwipe);
window.addEventListener('resize', initProductSwipe);
})();
Nutzen Sie die linken/rechten Pfeile, um durch die Slideshow zu navigieren, oder wischen Sie nach links bzw. rechts, wenn Sie ein mobiles Gerät verwenden
