←
{productCollection.title}
→
{productCollection.title}
{productCollection.subtitle}
{modelGroup.name}
ab 15000 €
{modelGroup.name} Varianten vergleichen
{productCollection.teaser -> f:format.raw()}
document.addEventListener("DOMContentLoaded", function () { const tabContainer = document.querySelector(".tab-nav-container"); const tabs = document.querySelectorAll(".productcollection-link"); const tabContents = document.querySelectorAll(".productcollection-pane"); const leftArrow = document.querySelector(".left-arrow"); const rightArrow = document.querySelector(".right-arrow"); let activeIndex = 0; // Der aktuell aktive Tab-Index // Funktion, um den aktiven Tab und Content zu aktualisieren function activateTab(index) { // Tabs aktivieren/deaktivieren tabs.forEach((tab, i) => { tab.classList.toggle("active", i === index); // Nur der aktuelle Tab ist aktiv tab.setAttribute("aria-selected", i === index ? "true" : "false"); }); // Tab-Content aktivieren/deaktivieren tabContents.forEach((content, i) => { content.classList.remove("show", "active"); // Zuerst alle deaktivieren if (i === index) { content.classList.add("show", "active"); // Aktivieren mit Animation } }); // Sichtbarkeit des aktiven Tabs sicherstellen scrollToVisible(index); // Pfeilzustände aktualisieren updateArrows(index); } // Funktion, um den Tab vollständig in den sichtbaren Bereich zu scrollen function scrollToVisible(index) { const activeTab = tabs[index]; const tabLeft = activeTab.offsetLeft; // Linke Position des Tabs relativ zum Container const tabRight = tabLeft + activeTab.offsetWidth; // Rechte Position des Tabs const containerLeft = tabContainer.scrollLeft; // Sichtbarer Bereich links const containerRight = containerLeft + tabContainer.offsetWidth; // Sichtbarer Bereich rechts if (tabLeft < containerLeft) { // Tab ist links abgeschnitten -> nach links scrollen tabContainer.scrollTo({ left: tabLeft, behavior: "smooth" }); } else if (tabRight > containerRight) { // Tab ist rechts abgeschnitten -> nach rechts scrollen tabContainer.scrollTo({ left: tabRight - tabContainer.offsetWidth, behavior: "smooth" }); } } // Funktion, um die Pfeile zu aktivieren/deaktivieren function updateArrows(activeIndex) { leftArrow.disabled = activeIndex === 0; // Linker Pfeil deaktiviert, wenn der erste Tab aktiv ist rightArrow.disabled = activeIndex === tabs.length - 1; // Rechter Pfeil deaktiviert, wenn der letzte Tab aktiv ist } // Event-Listener für die Pfeile leftArrow.addEventListener("click", () => { if (activeIndex > 0) { activeIndex--; activateTab(activeIndex); } }); rightArrow.addEventListener("click", () => { if (activeIndex < tabs.length - 1) { activeIndex++; activateTab(activeIndex); } }); // Initialer Zustand activateTab(activeIndex); });