Minecraft-Modern-Theme/js/slider-init.js aktualisiert

2025-12-07 12:33:19 +00:00
parent 2f93e98220
commit 231cf8fc6c
1 changed files with 50 additions and 63 deletions
--- a/Minecraft-Modern-Theme/js/slider-init.js
+++ b/Minecraft-Modern-Theme/js/slider-init.js
@@ -1,65 +1,52 @@
-<!DOCTYPE html>
-<html <?php language_attributes(); ?>>
-<head>
-    <meta charset="<?php bloginfo( 'charset' ); ?>">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
-    <?php wp_head(); ?>
-</head>
-<body <?php body_class(); ?>>
-<header id="masthead" class="site-header">
-    <div class="container">
-        <div class="header-main">
-            <div class="site-branding">
-                <?php
-                if ( function_exists( 'the_custom_logo' ) && has_custom_logo() ) {
-                    the_custom_logo();
-                }
-                ?>
-                <?php
+document.addEventListener('DOMContentLoaded', function() {
+    // Hole den Slider-Container
+    const heroSlider = document.querySelector('.hero-slider');

-                if ( is_front_page() && is_home() ) :
-                    ?>
-                    <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
-                <?php else : ?>
-                    <p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
-                <?php endif; ?>
-            </div>
-            <nav id="site-navigation" class="main-navigation">
-                <?php wp_nav_menu( array( 'theme_location' => 'primary', 'container' => false ) ); ?>
-            </nav>
-            <div class="header-info">
-                <div class="social-links">
-    <?php
-    // Array mit den Social-Media-Plattformen und ihren Font Awesome Klassen
-    $social_icons = array(
-        'discord'   => 'fab fa-discord',
-        'youtube'   => 'fab fa-youtube',
-        'twitter'   => 'fab fa-x-twitter', // Neues Icon für Twitter/X
-        'facebook'  => 'fab fa-facebook-f',
-        'instagram' => 'fab fa-instagram',
-        'tiktok'    => 'fab fa-tiktok',
-        'twitch'    => 'fab fa-twitch',
-        'steam'     => 'fab fa-steam',
-        'github'    => 'fab fa-github',
-        'linkedin'  => 'fab fa-linkedin-in',
-        'pinterest' => 'fab fa-pinterest-p',
-        'reddit'    => 'fab fa-reddit-alien',
-        'teamspeak' => 'fab fa-teamspeak',
-        'spotify'   => 'fab fa-spotify'
-    );
-
-    // Schleife, die alle verfügbaren Icons durchgeht
-    foreach ($social_icons as $key => $class) {
-        // Prüfen, ob für diese Plattform eine URL im Customizer hinterlegt wurde
-        if (get_theme_mod('social_' . $key)) {
-            // Wenn ja, Link und Icon ausgeben
-            echo '<a href="' . esc_url(get_theme_mod('social_' . $key)) . '" target="_blank"><i class="' . esc_attr($class) . '"></i></a>';
-        }
+    // Stelle sicher, dass der Slider auf der Seite existiert
+    if (!heroSlider) {
+        return;
    }
-    ?>
-</div>
-            </div>
-        </div>
-    </div>
-</header>
+
+    // Konfiguration für den Slider vorbereiten
+    const swiperConfig = {
+        // Der Effekt ist jetzt fest auf "Überblenden" eingestellt
+        effect: 'fade',
+        fadeEffect: {
+            crossFade: true
+        },
+
+        // Loop-Einstellung ist jetzt DYNAMISCH
+        loop: sliderSettings.loop === '1',
+
+        // Autoplay
+        autoplay: {
+            delay: 5000,
+            disableOnInteraction: false,
+        },
+
+        pauseOnMouseEnter: true,
+
+        // Prüfe, ob die Pfeile NICHT ausgeblendet werden sollen
+        navigation: sliderSettings.hideArrows !== '1' ? {
+            nextEl: '.swiper-button-next',
+            prevEl: '.swiper-button-prev',
+        } : false,
+
+        // Prüfe, ob die Paginierung NICHT ausgeblendet werden soll
+        pagination: sliderSettings.hidePagination !== '1' ? {
+            el: '.swiper-pagination',
+            clickable: true,
+        } : false,
+        
+        on: {
+            init: function () {
+                setTimeout(() => {
+                    heroSlider.classList.add('swiper-initialized');
+                }, 50);
+            },
+        },
+    };
+
+    // Initialisiere den Slider mit der konfigurierten Optionen
+    new Swiper('.hero-slider', swiperConfig);
+});