55 lines
1.8 KiB
JavaScript
55 lines
1.8 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function() {
|
|
// Hole den Slider-Container
|
|
const heroSlider = document.querySelector('.hero-slider');
|
|
|
|
// Stelle sicher, dass der Slider auf der Seite existiert, bevor du versuchst, ihn zu konfigurieren
|
|
if (!heroSlider) {
|
|
return;
|
|
}
|
|
|
|
// Konfiguration für den Slider vorbereiten
|
|
const swiperConfig = {
|
|
// Optionen für den Slider
|
|
loop: true, // Endloses Schleifen
|
|
|
|
// Autoplay
|
|
autoplay: {
|
|
delay: 5000, // 5 Sekunden pro Slide
|
|
disableOnInteraction: false, // Autoplay nicht nach Klick stoppen
|
|
},
|
|
|
|
// Wenn der Nutzer die Maus darüber bewegt, pausieren
|
|
pauseOnMouseEnter: true,
|
|
|
|
// Effekt
|
|
effect: 'fade', // Übergangseffekt: 'slide', 'fade', 'cube', etc.
|
|
fadeEffect: {
|
|
crossFade: true
|
|
}
|
|
};
|
|
|
|
// Prüfe, ob die Pfeile ausgeblendet werden sollen
|
|
if (sliderSettings.hideArrows === '1') {
|
|
heroSlider.classList.add('slider-hide-arrows');
|
|
} else {
|
|
// Navigation nur hinzufügen, wenn sie nicht ausgeblendet wird
|
|
swiperConfig.navigation = {
|
|
nextEl: '.swiper-button-next',
|
|
prevEl: '.swiper-button-prev',
|
|
};
|
|
}
|
|
|
|
// Prüfe, ob die Paginierung ausgeblendet werden soll
|
|
if (sliderSettings.hidePagination === '1') {
|
|
heroSlider.classList.add('slider-hide-pagination');
|
|
} else {
|
|
// Pagination nur hinzufügen, wenn sie nicht ausgeblendet wird
|
|
swiperConfig.pagination = {
|
|
el: '.swiper-pagination',
|
|
clickable: true, // Klick auf Punkt springt zum Slide
|
|
};
|
|
}
|
|
|
|
// Initialisiere den Slider mit der konfigurierten Optionen
|
|
new Swiper('.hero-slider', swiperConfig);
|
|
}); |