Files
satware.ai/docs/assets/javascript/testimonials.js
T
tfw d814f14897 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.
2025-04-25 11:41:04 +02:00

44 lines
1.8 KiB
JavaScript

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);
});
});
});