M_Viper/Minecraft-Modern-Theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

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

Browse Source
This commit is contained in:
M_Viper
2025-11-29 21:54:01 +00:00
parent 91df9b2f6f
commit 5be3e02b7d
1 changed files with 65 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
Minecraft-Modern-Theme/js/slider-init.js
View File

@@ -1,55 +1,65 @@
document.addEventListener('DOMContentLoaded', function() { <!DOCTYPE html>
// Hole den Slider-Container <html <?php language_attributes(); ?>>
const heroSlider = document.querySelector('.hero-slider'); <head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
// Stelle sicher, dass der Slider auf der Seite existiert, bevor du versuchst, ihn zu konfigurieren <meta name="viewport" content="width=device-width, initial-scale=1">
if (!heroSlider) { <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
return; <?php wp_head(); ?>
} </head>
<body <?php body_class(); ?>>
// Konfiguration für den Slider vorbereiten <header id="masthead" class="site-header">
const swiperConfig = { <div class="container">
// Optionen für den Slider <div class="header-main">
loop: true, // Endloses Schleifen <div class="site-branding">
<?php
// Autoplay if ( function_exists( 'the_custom_logo' ) && has_custom_logo() ) {
autoplay: { the_custom_logo();
delay: 5000, // 5 Sekunden pro Slide }
disableOnInteraction: false, // Autoplay nicht nach Klick stoppen ?>
}, <?php
// Wenn der Nutzer die Maus darüber bewegt, pausieren if ( is_front_page() && is_home() ) :
pauseOnMouseEnter: true, ?>
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
// Effekt <?php else : ?>
effect: 'fade', // Übergangseffekt: 'slide', 'fade', 'cube', etc. <p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
fadeEffect: { <?php endif; ?>
crossFade: true </div>
} <nav id="site-navigation" class="main-navigation">
}; <?php wp_nav_menu( array( 'theme_location' => 'primary', 'container' => false ) ); ?>
</nav>
// Prüfe, ob die Pfeile ausgeblendet werden sollen <div class="header-info">
if (sliderSettings.hideArrows === '1') { <div class="social-links">
heroSlider.classList.add('slider-hide-arrows'); <?php
} else { // Array mit den Social-Media-Plattformen und ihren Font Awesome Klassen
// Navigation nur hinzufügen, wenn sie nicht ausgeblendet wird $social_icons = array(
swiperConfig.navigation = { 'discord' => 'fab fa-discord',
nextEl: '.swiper-button-next', 'youtube' => 'fab fa-youtube',
prevEl: '.swiper-button-prev', 'twitter' => 'fab fa-x-twitter', // Neues Icon für Twitter/X
}; 'facebook' => 'fab fa-facebook-f',
} 'instagram' => 'fab fa-instagram',
'tiktok' => 'fab fa-tiktok',
// Prüfe, ob die Paginierung ausgeblendet werden soll 'twitch' => 'fab fa-twitch',
if (sliderSettings.hidePagination === '1') { 'steam' => 'fab fa-steam',
heroSlider.classList.add('slider-hide-pagination'); 'github' => 'fab fa-github',
} else { 'linkedin' => 'fab fa-linkedin-in',
// Pagination nur hinzufügen, wenn sie nicht ausgeblendet wird 'pinterest' => 'fab fa-pinterest-p',
swiperConfig.pagination = { 'reddit' => 'fab fa-reddit-alien',
el: '.swiper-pagination', 'teamspeak' => 'fab fa-teamspeak',
clickable: true, // Klick auf Punkt springt zum Slide 'spotify' => 'fab fa-spotify'
}; );
}
// Schleife, die alle verfügbaren Icons durchgeht
// Initialisiere den Slider mit der konfigurierten Optionen foreach ($social_icons as $key => $class) {
new Swiper('.hero-slider', swiperConfig); // 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>';
}
}
?>
</div>
</div>
</div>
</div>
</header>