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-12-07 12:33:19 +00:00
parent 2f93e98220
commit 231cf8fc6c
1 changed files with 50 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,65 +1,52 @@
<!DOCTYPE html> document.addEventListener('DOMContentLoaded', function() {
<html <?php language_attributes(); ?>> // Hole den Slider-Container
<head> const heroSlider = document.querySelector('.hero-slider');
<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
if ( is_front_page() && is_home() ) : // Stelle sicher, dass der Slider auf der Seite existiert
?> if (!heroSlider) {
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1> return;
<?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>';
}
} }
?>
</div> // Konfiguration für den Slider vorbereiten
</div> const swiperConfig = {
</div> // Der Effekt ist jetzt fest auf "Überblenden" eingestellt
</div> effect: 'fade',
</header> 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);
});