Add testimonials section with interactive functionality

Introduced a testimonials section to the homepage, including JavaScript for interactive switching and automatic cycling, as well as responsive styles in SCSS. Users can now view dynamic testimonials with associated images and text.
This commit is contained in:
tfw
2025-04-25 11:41:04 +02:00
parent 1bc8a2b6cb
commit d814f14897
29 changed files with 409 additions and 25 deletions
+43
View File
@@ -0,0 +1,43 @@
document.addEventListener('DOMContentLoaded', function() {
// Testimonial-Wechsel-Funktionalität
const testimonialImages = document.querySelectorAll('.satag--home-testimonial-image-wrapper');
const testimonialTexts = document.querySelectorAll('.satag--home-testimonials-text');
// Funktion zum Wechseln des aktiven Testimonials
function switchTestimonial(id) {
// Entferne 'active' Klasse von allen Bildern und Texten
testimonialImages.forEach(img => img.classList.remove('active'));
testimonialTexts.forEach(text => text.classList.remove('active'));
// Füge 'active' Klasse zum ausgewählten Bild und Text hinzu
document.querySelector(`.satag--home-testimonial-image-wrapper[data-testimonial-id="${id}"]`).classList.add('active');
document.querySelector(`.satag--home-testimonials-text[data-testimonial-id="${id}"]`).classList.add('active');
}
// Event-Listener für Klicks auf die Bilder
testimonialImages.forEach(img => {
img.addEventListener('click', function() {
const id = this.getAttribute('data-testimonial-id');
switchTestimonial(id);
});
});
// Optional: Automatischer Wechsel alle 5 Sekunden
let currentId = 1;
const totalTestimonials = testimonialImages.length;
function autoSwitchTestimonial() {
currentId = currentId % totalTestimonials + 1;
switchTestimonial(currentId);
}
// Kommentiere die nächste Zeile aus, wenn du keinen automatischen Wechsel möchtest
const intervalId = setInterval(autoSwitchTestimonial, 5000);
// Optional: Stoppe den automatischen Wechsel, wenn der Benutzer mit einem Testimonial interagiert
testimonialImages.forEach(img => {
img.addEventListener('click', function() {
clearInterval(intervalId);
});
});
});