We use the element – but leave the autorotation disabled by Enfold. The selection that it functions as a slider remains.
However, we set two user-defined classes
enable-custom-slider this is to check if we do not use the enfold settings for the slider. And activate our own script.
columns-X incicates the number of columns that should be shown in viewport
e.g: columns-5 (see example)
with custom class: enable-custom-slider and columns-5
images are smaller because there is a gap of 50px
Enfold normal behaviour with no trigger classes
/* ==== unfortunately necessary, because Enfold sets the transition to none inline when the autoration is turned off. ==== */
#top .enable-custom-slider .slide-entry-wrap {
transition: transform 2s ease !important;
gap: 50px; /* === you can setup via css a gap here ( Distance between the elments )==== */
}
#top .enable-custom-slider .slide-entry-wrap .av-partner-fake-img {
background-position: center center;
}
/* === for those images with links - you can set your own rule: === */
#top .enable-custom-slider .slide-image {
background-color: #efefef;
}function manipulate_dom_content_slider(){
?>
<script type="text/javascript">
window.addEventListener("DOMContentLoaded", function () {
(function($) {
// --- Iteriere über jeden avia-logo-element-container ---
// Dies stellt sicher, dass wir nur die spezifischen Slider bearbeiten, die unsere Klassen haben.
$('.avia-logo-element-container').each(function() {
const $logoContainer = $(this); // Der aktuelle Container in der Schleife
// Prüfe, ob dieser spezifische Container die Aktivierungsklasse hat
if (!$logoContainer.hasClass('enable-custom-slider')) {
console.log('Custom Slider: (Instance Check) Container without "enable-custom-slider" class. Skipping this instance.');
return true; // continue in jQuery's .each() loop
}
console.log('Custom Slider: (Instance Check) "enable-custom-slider" class found on this container. Initializing instance.');
// --- Variablen für diese spezifische Slider-Instanz ---
let initialColumnsFromClass = 5;
const classList = $logoContainer[0].className;
const columnsMatch = classList.match(/columns-(\d+)/);
if (columnsMatch && columnsMatch[1]) {
const parsedColumns = parseInt(columnsMatch[1], 10);
if (!isNaN(parsedColumns) && parsedColumns > 0) {
initialColumnsFromClass = parsedColumns;
} else {
console.warn('Custom Slider: (Instance) Found column count in "columns-X" is invalid. Using fallback value.');
}
} else {
console.log('Custom Slider: (Instance) No "columns-X" class found. Using fallback value.');
}
console.log('Custom Slider: (Instance) Initial columns from class (or fallback):', initialColumnsFromClass);
// Finde den zugehörigen avia-content-slider-inner innerhalb DIESES Containers
const $sliderInnerWrapper = $logoContainer.find('.avia-content-slider-inner');
if ($sliderInnerWrapper.length === 0) {
console.log('Custom Slider: (Instance) .avia-content-slider-inner not found within this container. Skipping instance.');
return true; // continue
}
// --- Autoplay-Intervall für diese Instanz ---
let slideIntervalMs = 2500;
const slideshowOptionsData = $sliderInnerWrapper.data('slideshow-options');
if (slideshowOptionsData) {
try {
const options = (typeof slideshowOptionsData === 'object') ? slideshowOptionsData : JSON.parse(slideshowOptionsData);
if (options.hasOwnProperty('interval')) {
slideIntervalMs = options.interval * 1000;
console.log('Custom Slider: (Instance) Autoplay interval read from data-slideshow-options:', options.interval + ' seconds (' + slideIntervalMs + ' ms)');
} else {
console.log('Custom Slider: (Instance) Autoplay interval (interval) not found in data-slideshow-options. Using default:', slideIntervalMs + ' ms');
}
} catch (e) {
console.error('Custom Slider: (Instance) Error parsing data-slideshow-options or reading interval:', e);
console.log('Custom Slider: (Instance) Using default autoplay interval:', slideIntervalMs + ' ms');
}
} else {
console.log('Custom Slider: (Instance) data-slideshow-options not found. Using default autoplay interval:', slideIntervalMs + ' ms');
}
// --- Konsolidierung der Slides in den ersten Wrapper für diese Instanz ---
const $allSlides = $sliderInnerWrapper.find('.slide-entry-wrap .slide-entry');
let $firstSlideWrapper = $sliderInnerWrapper.find('.slide-entry-wrap:first');
if ($firstSlideWrapper.length === 0) {
console.warn('Custom Slider: (Instance) No .slide-entry-wrap:first found. Attempting to create one.');
const $potentialSlideParent = $sliderInnerWrapper;
if ($potentialSlideParent.length) {
$potentialSlideParent.append('<div class="slide-entry-wrap"></div>');
$firstSlideWrapper = $potentialSlideParent.find('.slide-entry-wrap:first');
}
if ($firstSlideWrapper.length === 0) {
console.error('Custom Slider: (Instance) Critical error: Could not find/create a .slide-entry-wrap for slides. Skipping instance.');
return true; // continue
}
}
$allSlides.each( function() {
$(this).detach().appendTo($firstSlideWrapper);
});
$sliderInnerWrapper.find('.slide-entry-wrap:empty').remove();
const $slideContainer = $sliderInnerWrapper.find('.slide-entry-wrap');
if ($slideContainer.length === 0) {
console.log('Custom Slider: (Instance) No consolidated .slide-entry-wrap found. Skipping instance.');
return true; // continue
}
const $slides = $slideContainer.find('.slide-entry');
const numSlides = $slides.length;
console.log('Custom Slider: (Instance) Total number of slides after consolidation:', numSlides);
if (numSlides === 0) {
console.log('Custom Slider: (Instance) No slides found. Skipping instance.');
return true;
}
// --- Ermittlung des Gap-Wertes (einmalig, da CSS-basiert) ---
let gapValue = 0;
try {
const computedStyle = window.getComputedStyle($slideContainer[0]);
const gapProperty = computedStyle.columnGap || computedStyle.gap;
if (gapProperty && gapProperty.endsWith('px')) {
gapValue = parseFloat(gapProperty);
} else if (gapProperty === 'normal' || gapProperty === '0px' || gapProperty === '0') {
gapValue = 0;
}
} catch (e) {
console.error('Custom Slider: (Instance) Error reading gap value:', e);
}
if (isNaN(gapValue) || gapValue < 0) {
gapValue = 0;
}
console.log('Custom Slider: (Instance) Determined gapValue:', gapValue + 'px');
// --- WICHTIG: currentVisibleColumns muss außerhalb der Funktion sein,
// wenn gotoSlide sie direkt nutzen soll
let currentVisibleColumns = initialColumnsFromClass;
// --- Funktion zur Berechnung und Anwendung der Flex-Basis & Spaltenanzahl ---
function updateResponsiveColumns() {
const oldVisibleColumns = currentVisibleColumns;
console.log(`Custom Slider: (Instance) (updateResponsiveColumns) Current window.innerWidth: ${window.innerWidth}px`);
if (window.innerWidth < 480) {
currentVisibleColumns = 2;
console.log('Custom Slider: (Instance) (updateResponsiveColumns) Screen width < 480px. Setting visible columns to 2.');
} else if (window.innerWidth < 768) {
currentVisibleColumns = 3;
console.log('Custom Slider: (Instance) (updateResponsiveColumns) Screen width < 768px. Setting visible columns to 3.');
} else if (window.innerWidth < 1024) {
currentVisibleColumns = 4;
console.log('Custom Slider: (Instance) (updateResponsiveColumns) Screen width < 1024px. Setting visible columns to 4.');
} else {
currentVisibleColumns = initialColumnsFromClass;
console.log('Custom Slider: (Instance) (updateResponsiveColumns) Screen width >= 1024px. Using initial columns from class:', initialColumnsFromClass);
}
console.log('Custom Slider: (Instance) (updateResponsiveColumns) Final currentVisibleColumns for this size:', currentVisibleColumns);
const dynamicFlexBasis = `calc((100% / ${currentVisibleColumns}) - ((${currentVisibleColumns} - 1) * ${gapValue}px / ${currentVisibleColumns}))`;
console.log('Custom Slider: (Instance) (updateResponsiveColumns) Calculated dynamicFlexBasis:', dynamicFlexBasis);
$slides.each(function() {
const slideElement = this;
slideElement.style.setProperty('flex', `1 0 ${dynamicFlexBasis}`, 'important');
slideElement.style.setProperty('width', 'unset', 'important');
slideElement.style.setProperty('box-sizing', 'border-box', 'important');
slideElement.style.setProperty('margin-right', '0px', 'important');
slideElement.style.setProperty('margin-left', '0px', 'important');
slideElement.style.setProperty('padding-left', '0px', 'important');
slideElement.style.setProperty('padding-right', '0px', 'important');
});
const maxScrollIndex = numSlides - currentVisibleColumns;
console.log(`Custom Slider: (Instance) (updateResponsiveColumns) numSlides: ${numSlides}, currentVisibleColumns: ${currentVisibleColumns}, maxScrollIndex: ${maxScrollIndex}`);
if (maxScrollIndex <= 0) {
$sliderInnerWrapper[0].style.setProperty('overflow', 'visible', 'important');
$sliderInnerWrapper[0].style.setProperty('height', 'auto', 'important');
$slideContainer[0].style.setProperty('justify-content', 'center', 'important'); // Use $slideContainer here
console.log('Custom Slider: (Instance) (updateResponsiveColumns) Not enough slides for scrolling. Centering items. Returns false.');
return false;
} else {
$sliderInnerWrapper[0].style.setProperty('overflow', 'hidden', 'important');
$sliderInnerWrapper[0].style.setProperty('height', 'auto', 'important');
$slideContainer[0].style.setProperty('justify-content', 'flex-start', 'important'); // Use $slideContainer here
console.log('Custom Slider: (Instance) (updateResponsiveColumns) Slider is scrollable. Returns true.');
return true;
}
}
const isInitialScrollable = updateResponsiveColumns();
// --- Styles für den Slide-Container (einmalig, da diese unabhängig von Spalten sind) ---
setTimeout(() => {
$slideContainer[0].style.setProperty('will-change', 'transform', 'important');
$slideContainer[0].style.setProperty('display', 'flex', 'important');
$slideContainer[0].style.setProperty('flex-wrap', 'nowrap', 'important');
console.log('Custom Slider: (Instance) Critical CSS styles re-applied to slideContainerElement after 300ms timeout.');
}, 300);
// --- Slider-Animationslogik ---
let currentSlideIndex = 0;
let autoPlayDirection = 1;
let autoSlideInterval;
function gotoSlide(index) {
const maxIndex = numSlides - currentVisibleColumns;
console.log(`Custom Slider: (Instance) (gotoSlide) Attempting to go to index: ${index}, maxIndex (derived from currentVisibleColumns): ${maxIndex}`);
if (maxIndex <= 0) {
console.log('Custom Slider: (Instance) (gotoSlide) Not scrollable, cannot move.');
currentSlideIndex = 0;
const targetSlide = $slides.eq(currentSlideIndex)[0];
const offset = targetSlide ? targetSlide.offsetLeft : 0;
$slideContainer[0].style.setProperty('transform', `translateX(-${offset}px) translateZ(0)`, 'important');
return;
}
if (index < 0) {
index = maxIndex;
} else if (index > maxIndex) {
index = 0;
}
currentSlideIndex = index;
const targetSlide = $slides.eq(currentSlideIndex)[0];
const offset = targetSlide ? targetSlide.offsetLeft : 0;
$slideContainer[0].style.setProperty('transform', `translateX(-${offset}px) translateZ(0)`, 'important');
console.log('Custom Slider: (Instance) (gotoSlide) Slider moved to index:', currentSlideIndex);
}
function startAutoplay() {
clearInterval(autoSlideInterval);
if (updateResponsiveColumns()) {
autoSlideInterval = setInterval(animateAutoSlide, slideIntervalMs);
console.log('Custom Slider: (Instance) (startAutoplay) Autoplay started.');
} else {
console.log('Custom Slider: (Instance) (startAutoplay) Autoplay not started/stopped because slider is not scrollable.');
}
}
function animateAutoSlide() {
const maxIndex = numSlides - currentVisibleColumns;
if (maxIndex <= 0) {
clearInterval(autoSlideInterval);
console.log('Custom Slider: (Instance) (animateAutoSlide) Autoplay stopped because slider is not scrollable.');
return;
}
let nextIndex = currentSlideIndex + autoPlayDirection;
if (autoPlayDirection === 1) {
if (nextIndex > maxIndex) {
autoPlayDirection = -1;
nextIndex = maxIndex;
}
} else {
if (nextIndex < 0) {
autoPlayDirection = 1;
nextIndex = 0;
}
}
gotoSlide(nextIndex);
}
if (isInitialScrollable) {
startAutoplay();
} else {
console.log('Custom Slider: (Instance) (INIT) Autoplay not started initially because slider is not scrollable.');
}
// --- Hover-Funktionalität (Autoplay stoppen/starten) ---
$logoContainer.on('mouseenter', function() {
clearInterval(autoSlideInterval);
console.log('Custom Slider: (Instance) (Hover) Autoplay stopped.');
});
$logoContainer.on('mouseleave', function() {
startAutoplay();
console.log('Custom Slider: (Instance) (Hover) Autoplay initiated after mouseleave.');
});
// --- MANUELLE NAVIGATION (Pfeile) ---
// Finde die Pfeile innerhalb DIESES Containers
const $prevArrow = $logoContainer.find('.avia-slideshow-arrows .prev-slide');
const $nextArrow = $logoContainer.find('.avia-slideshow-arrows .next-slide');
if ($prevArrow.length && $nextArrow.length) {
$prevArrow.attr('href', 'javascript:void(0)');
$nextArrow.attr('href', 'javascript:void(0)');
$prevArrow.css('cursor', 'pointer');
$nextArrow.css('cursor', 'pointer');
$prevArrow.on('click', function(e) {
e.preventDefault();
clearInterval(autoSlideInterval);
const maxIndex = numSlides - currentVisibleColumns;
if (maxIndex <= 0) {
console.log('Custom Slider: (Instance) (Manual) Not scrollable, prev click ignored.');
return;
}
let targetIndex = currentSlideIndex - 1;
if (targetIndex < 0) {
targetIndex = maxIndex;
}
gotoSlide(targetIndex);
console.log('Custom Slider: (Instance) (Manual) Previous slide clicked. Current index:', currentSlideIndex);
});
$nextArrow.on('click', function(e) {
e.preventDefault();
clearInterval(autoSlideInterval);
const maxIndex = numSlides - currentVisibleColumns;
if (maxIndex <= 0) {
console.log('Custom Slider: (Instance) (Manual) Not scrollable, next click ignored.');
return;
}
let targetIndex = currentSlideIndex + 1;
if (targetIndex > maxIndex) {
targetIndex = 0;
}
gotoSlide(targetIndex);
console.log('Custom Slider: (Instance) (Manual) Next slide clicked. Current index:', currentSlideIndex);
});
console.log('Custom Slider: (Instance) Enfold Nav Arrows assigned click functionality.');
} else {
console.log('Custom Slider: (Instance) Enfold Nav Arrows not found for this instance.');
}
// --- Resize-Handler (für JEDE Instanz) ---
let resizeTimeout;
$(window).on('resize', function() {
clearTimeout(resizeTimeout);
resizeTimeout = setTimeout(() => {
console.log('Custom Slider: (Instance) (Resize) Handling resize event for this instance...');
const wasScrollable = updateResponsiveColumns();
gotoSlide(currentSlideIndex);
$sliderInnerWrapper[0].style.setProperty('height', 'auto', 'important');
if (wasScrollable) {
startAutoplay();
} else {
clearInterval(autoSlideInterval);
console.log('Custom Slider: (Instance) (Resize) Autoplay stopped due to non-scrollable state after resize.');
}
console.log('Custom Slider: (Instance) (Resize) Resize event handled. Current index:', currentSlideIndex);
}, 250);
});
}); // End of .each() loop
})(jQuery);
});
</script>
<?php
}
add_action('wp_footer', 'manipulate_dom_content_slider');Sie sehen gerade einen Platzhalterinhalt von Facebook. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Mehr InformationenSie sehen gerade einen Platzhalterinhalt von Instagram. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Mehr Informationen