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

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

@@ -1,55 +1,65 @@
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;
<!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
// Konfiguration für den Slider vorbereiten
const swiperConfig = {
// Optionen für den Slider
loop: true, // Endloses Schleifen
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'
);
// 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
// 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>';
}
};
// 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);
});
?>
</div>
</div>
</div>
</div>
</header>